量角器 - Chromium 89 - w3c 合规性和 browser.actions

如何解决量角器 - Chromium 89 - w3c 合规性和 browser.actions

我有一个需要点击复选框的测试。 如果我只是做 $('.my-cb').click() 我得到 Element <input type="checkBox" > is not clickable at point (...). Other element would receive the click: <div>...</div>

这就是为什么我这样做

browser.actions().mouseMove($('.my-cb')).click().perform()

由于使用了 browser.actions，我需要禁用 chrome 的 w3c 合规性，因为它在 75.X 版本中开始出现故障。目前它运行良好。

config.capabilities = {
  browserName: 'chrome',chromeOptions: {
    args: ['--disable-web-security','--ignore-certificate-errors'],w3c: false,},...
}

现在我已经更新了 Chrome 75 -> 89。 虽然这适用于我的本地 Windows 环境，但它在 linux CI 上失败了 Failed: unkNown command: Cannot call non W3C standard command while in W3C mode

所以实际上我需要的是禁用 w3c 合规性（因为上述配置停止工作）或替换 browser.actions() 调用。 我一直在寻找在 Chrome 89 中禁用 w3c 合规性的其他方法，但没有发现任何有用的东西。只有其他人遇到同样的问题。

"@angular/core": "^10.2.4","protractor": "~7.0.0",chromedriver_89.0.4389.23

---------- 编辑 ----------

1. 事实证明，我的 selenium 服务器已升级，现在传递 chrome 配置的正确方法是使用 'goog:chromeOptions' 的 chromeOptions 插入。通过这种方式，我能够再次禁用 w3c 合规性。

    'goog:chromeOptions': {
      args: ['--disable-web-security',

2. 与此同时，将@Sergey Pleshakov 的答案与其他一些答案（例如 https://stackoverflow.com/a/44595703/1913596）相结合，我能够从 browser.actions 的用法切换到普通的 browser.executeScript 用法取得相当不错的结果。 @Sergey Pleshakov 提出的 jsClick 对复选框效果很好，但对于下拉菜单，我需要做更多的工作。 由于我的测试是单击一个带有多个选项卡的大表单，因此需要等待选项向下滚动和向上滚动。最后我完成了这样的代码：

export const jsClick = $element =>
  browser.executeScript('return arguments[0].click();',$element.getWebElement())

export const jsMove = async $element => {
  await browser.executeScript(
    `if(document.createEvent) {
      var evObj = document.createEvent('MouseEvents');
      evObj.initEvent('mouSEOver',true,false);
      arguments[0].dispatchEvent(evObj); 
    } else if (document.createEventObject) { 
      arguments[0].fireEvent('onmouSEOver'); 
    }`,$element.getWebElement()
  )
  return browser.sleep(1000)
}

export const scrollIntoView = function(el) {
  return browser.executeScript(function(el) {
    el.scrollIntoView()
  },el.getWebElement())
}

await scrollIntoView(input)
await jsMove(input)
await browser.wait(until.elementToBeClickable(input),5000,WAITING_TOO_LONG_FOR_ELEMENT)
await input.click()

const optionByCss = by.cssContainingText('mat-option .mat-option-text',value);
await browser.wait(until.visibilityOf(element(optionByCss)),WAITING_TOO_LONG_FOR_ELEMENT)
const option = await element(optionByCss)
await jsMove(option)
await option.click()
await browser.wait(until.invisibilityOf(element(optionByCss)),WAITING_TOO_LONG_FOR_ELEMENT)

然而，这是相当悲伤做这种过并发症，而一个可以只使用browser.actions().mouseMove($('.cls')).click().perform()在Chrome。我真的不明白为什么这个 API 没有移植到其他浏览器。

非常感谢您花费的时间。

解决方法

您的问题是因为在您的元素之上有一个包装元素。它甚至可以是隐形的。但是量角器不能点击它。您可以做的是 top 声明 js 单击（在控制台中注入脚本）。然后直接点击任何元素。此 jsClick 不关心您点击的元素的交互性和可见性

    let jsClick = ($element) => browser.executeScript(
        "arguments[0].click();",$element.getWebElement()
    );

    let $option = $("option[value='395']");

    await jsClick($option);