Warning: fopen(/tmp/SghXTngBZPli-S6mRjt.tmp): failed to open stream: Disk quota exceeded in /home/executea/public_html/blog/wp-admin/includes/class-wp-filesystem-ftpext.php on line 139

Warning: unlink(/tmp/SghXTngBZPli-S6mRjt.tmp): No such file or directory in /home/executea/public_html/blog/wp-admin/includes/class-wp-filesystem-ftpext.php on line 142
Site Loader
Auckland, New Zealand

In this article we will discuss the continuation of the great new features we discussed in our previous post “Everything you need to know about Selenium 4” , in that post we did not discussed a lot about ChromeDevTools and about the DevTools library introduced in Selenium 4 in detail, which we will discuss in this post

In this post, we will discuss the following Features with code snippet

1. Testing network offline

2. Network interception of page resources such as CSS and JPG file

3. Page.crash info via Inspector

4. Getting DevTools console log output

Let’s discuss them all in the code snippet below

Testing network offline/Online

    /**
     * Enable Network Offline
     * @param devTools
     */
    private static void enableNetworkOffline(DevTools devTools) {
        devTools.send(Network.enable(Optional.of(100000000), Optional.empty(), Optional.empty()));

        devTools.send(emulateNetworkConditions(true, 100, 1000, 2000,
                Optional.of(ConnectionType.cellular3g)));

        devTools.addListener(loadingFailed(), loadingFailed -> assertEquals(loadingFailed.getErrorText(), "net::ERR_INTERNET_DISCONNECTED"));
    }


    /**
     * Enable Network Online
     * @param devTools
     */
    private static void enableNetworkOnline(DevTools devTools) {
        devTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));

        devTools.send(emulateNetworkConditions(false, 100, 5000, 2000,
                Optional.of(ConnectionType.cellular4g)));

    }

Network interception of page resources

    /**
     * Intercept Network
     * @param chromeDevTools
     */
    private static void interceptNetwork(DevTools chromeDevTools) {
        chromeDevTools.send(Network.enable(Optional.empty(), Optional.empty(), Optional.empty()));

        //set blocked URL patterns
        chromeDevTools.send(Network.setBlockedURLs(ImmutableList.of("*.css", "*.jpg")));

        //add event listener to verify that css and png are blocked
        chromeDevTools.addListener(loadingFailed(), loadingFailed -> {

            if (loadingFailed.getResourceType().equals(ResourceType.Stylesheet)) {
                assertEquals(loadingFailed.getBlockedReason(), BlockedReason.inspector);
            }

            else if (loadingFailed.getResourceType().equals(ResourceType.Image)) {
                assertEquals(loadingFailed.getBlockedReason(), BlockedReason.mixedContent);
            }

        });
    }

Page.crash info via Inspector

    /**
     * Inspect Detached Network
     * @param devTools
     */
    private static void inspectDetached(DevTools devTools) {
        devTools.addListener(detached(), Assert::assertNotNull);
        devTools.send(Inspector.enable());
        Set targetInfos = devTools.send(Target.getTargets());
        targetInfos.forEach(
                targetInfo -> {
                    var sessionId = devTools.send(attachToTarget(targetInfo.getTargetId(), Optional.of(false)));
                    devTools.send(
                            Target.sendMessageToTarget(
                                    "{\"method\":\"Page.crash\"}",
                                    Optional.of(sessionId),
                                    Optional.of(targetInfo.getTargetId())));
                });
        devTools.send(Inspector.disable());
    }

Getting DevTools console log output

    /**
     * Get Console Logs
     * @param chromeDevTools
     * @param message
     */
    private static void consoleLogs(DevTools chromeDevTools, String message) {

        chromeDevTools.send(Console.enable());

        //add listener to verify the console message
        chromeDevTools.addListener(Console.messageAdded(), consoleMessageFromDevTools ->
                assertEquals(true, consoleMessageFromDevTools.getText().equals(message)));

    }

Here is the complete video of the above discussion

Thanks for watching the video and reading the article please let me know if you feel there needs any changes On the post or comments on the post so that I can update the same

Thanks

Karthik KK

Post Author: Karthik kk

2 Replies to “Selenium 4 – Understanding and Working with Chromium Dev Tools”

  1. Hi Kartik, This Seems to be a nice example but i need this for C# and i am not able to find such function and methods for c# selenium 4. Could you please help with that?

  2. Hi!
    How about some examples of incercepting and validating http requests\responses from frontend. Could you tell about it?

Leave a Reply

Your email address will not be published. Required fields are marked *