Clear Chrome Browser Cache using Nightwatch

Question

Using Nightwatch I am trying to clear the browser cache of Chrome which means I have to click the Confirm button on the settings page and therefore wait for it to be present. (chrome://settings/clearBrowserData)

Because Chrome is using shadow-roots this isn't as simple as selecting the element using the id.

Until just a few days ago the following worked just fine.

client.init('chrome://settings/clearBrowserData')
  .waitForElementPresent('* /deep/ #clearBrowsingDataConfirm', 20000)
  .moveToElement('* /deep/ #clearBrowsingDataConfirm', 5, 5)
  .mouseButtonClick(0)

I assume due to an automatic update of Chrome this now does not work anymore locally whereas on our Jenkins where we have a fixed Chrome version this still works.

The question now is whether there is an alternative to this. CSS doesn't seem to have an alternative to the /deep/ selector so I thought XPath might be a solution but either I tried it the wrong way or it just isn't.

Another possibility might be to somehow go down the tree shadow-root by shadow-root just like the constructed query by Chrome when copying the JS-Path of the specific element:

document.querySelector('body > settings-ui').shadowRoot.querySelector('#main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('#advancedPage > settings-section:nth-child(1) > settings-privacy-page').shadowRoot.querySelector('settings-clear-browsing-data-dialog').shadowRoot.querySelector('#clearBrowsingDataConfirm')

Unfortunately I don't yet know Nightwatch well enough to adapt this to Nightwatch.

Does anyone have an idea on how to achieve clearing the browser cache with Nightwatch?

Answer 1

module.exports = {
  "@tags": ["EXAMPLE"],
  "Clear Chrome Browser Cache": function (browser) {
    browser
      .url("chrome://settings/clearBrowserData")
      .waitForElementVisible("body")
      .execute(
        function () {
          return document
            .querySelector("settings-ui")
            .shadowRoot.querySelector("settings-main")
            .shadowRoot.querySelector("settings-basic-page")
            .shadowRoot.querySelector(
              "settings-section > settings-privacy-page"
            )
            .shadowRoot.querySelector("settings-clear-browsing-data-dialog")
            .shadowRoot.querySelector("#clearBrowsingDataDialog")
            .querySelector("#clearBrowsingDataConfirm");
        },
        [],
        function (clearData) {
          const clearDataButton = element(clearData.value);
          clearDataButton.click();
        }
      )
  },
};