使用 Nightwatch 清除 Chrome 浏览器缓存

Question

使用 Nightwatch 我正在尝试清除 Chrome 的浏览器缓存，这意味着我必须单击设置页面上的确认按钮，然后等待它出现。 (chrome://settings/clearBrowserData)

因为 Chrome 使用的是 shadow-roots，所以这并不像使用 id 选择元素那么简单。

直到几天前，以下工作还不错。

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

我假设由于 Chrome 的自动更新，这现在在本地不再工作，而在我们的 Jenkins 上，我们有一个固定的 Chrome 版本，这仍然有效。

现在的问题是是否有替代方案。 CSS 似乎没有替代 /deep/ 选择器，所以我认为 XPath 可能是一个解决方案，但要么我尝试了错误的方式，要么它不是。

另一种可能性可能是以某种方式 go 通过 shadow-root 沿着树 shadow-root 向下，就像 Chrome 在复制特定元素的 JS-Path 时构造的查询一样：

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')

不幸的是，我对 Nightwatch 的了解还不够好，无法将其改编为 Nightwatch。

有谁知道如何使用 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();
        }
      )
  },
};