Используя Puppeteer, можно ли выслушать API истории браузера, например history.pushState
, history.replaceState
или history.popState
, часто используемый под капотом маршрутизаторами рамок одностраничных приложений, например, react-router
, для перехода назад и четвертого Просмотры?
Я не ищу page.waitForNavigation(options)
, так как он не перемещается в прямом смысле этого слова и не является слушателем.
Более того, я хотел бы иметь возможность захватить аргументы, переданные в функции истории, такие как data
, title
и url
.
Вы можете использовать waitForNavigation
для прослушивания событий API истории. Пример:
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://www.google.com');
const [navResponse] = await Promise.all([
page.waitForNavigation(),
page.evaluate(() => { history.pushState(null, null, 'imghp') }),
])
console.log(navResponse) // null as per puppeteer docs
await browser.close();
Согласно документации, ответ на навигацию является нулевым. "В случае навигации к другому якорю или навигации из-за использования API истории, навигация будет разрешаться с нулевым значением".
Если вы используете хеш-навигацию, вы можете создать прослушиватель событий, когда маршрут изменится, как указано в примерах кукловода.
await page.exposeFunction('onHashChange', url => page.emit('hashchange', url));
await page.evaluateOnNewDocument(() => {
addEventListener('hashchange', e => onHashChange(location.href));
});
// Listen for hashchange events in node Puppeteer code.
page.on('hashchange', url => console.log('hashchange event:', new URL(url).hash));
react-router
page.waitForNavigation()
просто завершится в TimeoutError: Превышено время ожидания навигации
From Puppeteer's standpoint, “navigation” is anything that changes a page's URL. Aside from regular navigation where the browser hits the network to fetch a new document from the web server, this includes anchor navigations and History API usage.
Таким образом, вы должны иметь возможность использоватьpage.waitForNavigation(options)
для событий History API такжеreact-router
, это выдает ошибку тайм-аута ...