selenium 4. chrome dev tools

basic usage

Posted on February 5, 2020

Selenium 4 is now in alpha (4.0.0-alpha-4) and we can try out its new features. They introduced native support for Chrome DevTools. This means that we can use Chrome Development properties such as Console, Network etc. from our test scripts. Cool, yeah?

Let’s test it with Selenide.

First of all we need to get DevTools and create session:

    private DevTools chromeDevTools;
    private final String imdbUrl = "https://www.imdb.com/";

    @BeforeEach
    public void setup() {
        open(imdbUrl);
        ChromeDriver driver = (ChromeDriver) getWebDriver();
        chromeDevTools = driver.getDevTools();
        chromeDevTools.createSession();
    }

Then we can implement test scripts that are using devtools in various flows.

Go offline

    @Test
    public void goOfflineTest() {
        chromeDevTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
        chromeDevTools.send(
                emulateNetworkConditions(true, 0, 0, 0, Optional.empty()));
        open(imdbUrl);
        $(".error-code").shouldHave(Condition.text("ERR_INTERNET_DISCONNECTED"));
    }

Mobile device emulation

    @Test
    public void webToMobileTest() {
        String mAgent = "Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Mobile Safari/537.36";
        chromeDevTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
        chromeDevTools.send(Network.setUserAgentOverride(mAgent, Optional.empty(), Optional.empty()));
        open(imdbUrl);
        assertEquals("https://m.imdb.com/", getWebDriver().getCurrentUrl(), "Opened imdb version is not mobile");
    }

Adding custom headers to requests

    @Test
    public void addCustomHeaderTest() {
        chromeDevTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));
        chromeDevTools.send(Network.setExtraHTTPHeaders(new Headers(ImmutableMap.of("testCustomHeader",
                "testCustomHeaderValue"))));
        chromeDevTools.addListener(Network.requestWillBeSent(), requestWillBeSent ->
                assertEquals(requestWillBeSent.getRequest().getHeaders().get("testCustomHeader"),
                        "testCustomHeaderValue"));
        open(imdbUrl);
    }

Each sent request will contain this testCustomHeader: testCustomHeaderValue key-value pair in headers.

Please find full code examples in the github repo.