The Chrome DevTools Protocol (CDP) is a tool for inspecting and debugging Chrome-based browsers. CDP APIs offer abilities to alter network requests, get cookies, delete cache, and do many other operations. These APIs are also useful for automation testing when we need to perform DevTools related operations.

The Selenium CDP network object offers methods to monitor the page's network activity. In this article, we'll look at some operations that can be performed on headers, cookies, and browser cache using Selenium 4 CDP with Capybara and Ruby.

To get started, we will install the selenium-webdriver and the selenium-devtools gems. The version of these gems must match the version of the Chrome browser.

To configure Selenium 4 CDP with Capybara, we add the following steps:

require 'capybara/rspec'
require 'selenium-webdriver'
require 'selenium/devtools'

Selenium::WebDriver::Chrome::Service.driver_path = 'C:\Users\chromedriver.exe'
Capybara.default_driver = :selenium
Capybara.register_driver :selenium do |app|
  Capybara::Selenium::Driver.new(
    app,
    browser: :chrome
  )
end

Headers

Network tracking must be enabled in order to carry out operations related to the network. This can be done by using the network object's enable method. After this, we can attach the header to the HTTP request by passing the header values to the set_extra_http_headers method provided by the network object. The code would look like:

it 'adds header to HTTP request' do
  # Activate network settings
  page.driver.browser.devtools.network.enable

  # Attach headers to the request using setExtraHTTPHeaders
  page.driver.browser.devtools.network.set_extra_http_headers(headers: {
    'header_key_1' => 'header_value_1',
    'header_key_2' => 'header_value_2'
  })

  # Visit the desired page
  visit('https://desired-page-url.com')
end

Cookies

To attach the cookie to the website, visit the required page and pass the cookie parameters using set_cookies method. The code snippet would explain how to attach multiple cookies:

it 'adds cookie to a page' do
  # Visit the desired page
  visit('https://desired-page-url.com')

  # Attach the cookie to the page
  page.driver.browser.devtools.network.set_cookies(cookies: [
    {
       name: 'cookie_1_name',
       value: 'cookie_1_value',
       domain: 'page domain'
    },
    {
       name: 'cookie_2_name',
       value: 'cookie_2_value',
       domain: 'page domain'
    }
  ])
end

get_all_cookies method is used to retrieve all the browser cookies.

it 'gets all cookies present on the browser' do
  # Visit the page
  visit('https://desired-page-url.com')
  # Retrieve all the browser cookies
  # page.driver.browser.devtools.network.get_all_cookies = > {"id" => 5, "result" => {"cookies"=>[{"name"=>"cookie_name", ...}]}}
  cookie_array = page.driver.browser.devtools.network.get_all_cookies['result']['cookies']
end

To retrieve browser cookies for a specific page, get_cookies method can be used by passing the page URL.

page.driver.browser.devtools.network.get_cookies(urls: ['https://desired-page-url.com'])

Cache

Before running an automation test it's always a good idea to clear the browser cache. This stops the browser from utilizing cached versions of websites while performing the tests. Selenium 4 CDP offers the option to clear the browser cache and disable the browser cache to prevent the browser from using the cached copy of the page.

To delete cache for a webpage the clear_browser_cache method is used.

it 'clears browser cache' do
  page.driver.browser.devtools.network.clear_browser_cache
end

The set_cache_disabled method is used to prevent the browser from using cache for a webpage. To use this method, we first enable the network setting similar to the header section. Then we call the set_cache_disabled method by passing the cache_disabled flag as true.

it 'Disable Browser Cache' do
  # Activate network settings
  page.driver.browser.devtools.network.enable
  # Disable broswer cache
  page.driver.browser.devtools.network.set_cache_disabled(cache_disabled: true)
  # Visit the page
  visit('https://desired-page-url.com')
end

This was just a quick rundown of how to use DevTools with Capybara and Selenium Driver. In our project, we intended to add a header to access the web-page, verify scenarios involving cookie presence, and carry out cache-related tasks. Selenium 4 CDP was helpful to us in achieving our objective, and we hope it will be for you as well.

References