When pressing a button on a webpage loads a new URL in Google Chrome

Question

At the following web address: h ttps://www.sky.com/new-search/chernobyl?q=chernobyl is a button called Episodes . I have determined from Google Chrome developer tools, that this is represented by:

<button role="tab" type="button" id="tabs-id_2474-link-1" class="c-tabs__link" aria-selected="false" aria-controls="tabs-id_2474-article-1" data-test-id="episodes-tab-button">Episodes</button>

...I've also managed to find from the 'Sources' tab of dev tools that the Javascript for mouse clicks is webpack:///./src/builders/click.js?388e .

The effect of pressing the Episodes button is that the URL of the page changes from https://www.sky.com/new-search/chernobyl?q=chernobyl to https://www.sky.com/new-search/chernobyl/episodes/season-1/episode-0?q=chernobyl and the page changes to show episodes from the series and a synopsis for that episode.

The bit I am missing though, is now does the mouse click Javascript trigger the loading of this second URL? I need to be able to capture somehow the new URL, or even better the full source code for the second URL...

Any ideas?

Answer 1

Client-side applications can basically do whatever they want, in terms of navigation. There is no standard mechanism, outside of a normal link <a> .

What they're probably doing is updating the existing page, and updating the URL to retain the state. That is, when you click the button, their code goes off and fetches some data from the server, then creates elements on the page based on that data. The actual original HTML page (and context) stays the same, but it can be modified with fresh data. The URL can be updated with the History API .

If you know something about the web application you're trying to inspect, you can write code for it specifically. For example, if you know that the application always fetches data from https://api.example.com/some-data , then you can skip the whole web page ordeal and hit the API directly.

If you need a more generic solution, the only thing you can really do is run a whole browser engine, through Chromium Embedded Framework or similar. This allows the web application to run as it normally would. Then, on URL change, you can inspect the DOM with your own code.