失败：使用定位器找不到元素：By(css selector, option[value="xxx"])答案

【问题标题】：Failed: No element found using locator: By(css selector, option[value="xxx"])失败：使用定位器找不到元素：By(css selector, option[value="xxx"])
【发布时间】：2018-04-23 21:06:47
【问题描述】：

我刚刚在 VS Code 中使用 Protractor 编写了我的第一个 e2e 测试。这是一个困扰我好几天的奇怪问题。我不时收到此错误。我注意到有时当我关闭 VS Code 并重新打开它时。问题将消失。但是，它会在一段时间后恢复。

test.spec.ts

fit('should have an quote price', async () => {
  await page.fillApplicantAge(0, '20');

  const tobaccoUsageSelection = page.getRadioButton('smoker', 'no');

  await page.clickElement(tobaccoUsageSelection);

  const planTypeSelection = page.getNamedRadioButton('planType', 'Single');

  await page.clickElement(planTypeSelection);

  const coverageTypeSelection = page.getNamedRadioButton('coverageType', 'Gold');

  await page.clickElement(coverageTypeSelection);

  await page.fillApplicantEffectiveDate(0, 'today');

  await page.fillApplicantExpiryDate(0, 'next month');

  await page.setSelectBoxValueInsideChildComponent('destination', 'New York');

  await page.fillTextBox('sumInsured', '5500');

  const priceElement = await page.getElementByCss('h3 .amount');

  expect(+(await priceElement.getText()).replace(',', '')).toBeGreaterThan(0);
});

在 test.po.ts 文件中：

async setSelectBoxValueInsideChildComponent(formFieldName: string, value: string) {
   const formField = element(by.css(`[formControlName="${formFieldName}"] select`))
  .element(by.css(`option[value="${value}"]`));

   await formField.click();
}

 getElementByCss(selector: string) {
   return element(by.css(selector));
}

所以这个测试文件应该可以成功运行。它实际上已经成功运行了几次。但有时，“destination”行会抛出错误，有时“h3 .amount”行会无缘无故地抛出错误。

失败：使用定位器找不到元素：By(css selector, option[value="xxx"])

屏幕只是闪烁并很快退出。所以我无法检查发生了什么。

我很困惑。到目前为止，我关闭了 VS Code 以解决该问题。但这真的让我很烦恼，因为一旦我修改了某些内容，错误可能会再次出现。

请帮忙！提前致谢！

顺便说一句，我们如何在 VS Code 中调试 e2e 测试？我尝试了一些来自互联网的建议，但没有任何效果...... :(

【问题讨论】：

请显示函数：setSelectBoxValueInsideChildComponent() 和 getElementByCss()
刚刚将这两个功能添加到我的问题中。谢谢！
C，这两个函数没有明显的问题，我猜唯一可能的原因是你需要在这两个函数之前添加一些等待。您可以尝试出于调试目的来证明我的猜测。添加await browser.sleep(10*1000)
谢谢勇！我添加了 await browser.sleep(60*1000) 进行调试。事实证明，当 API 尝试获取国家/地区时出现错误。 “请求的资源错误中不存在‘Access-Control-Allow-Origin’标头”。我很困惑。我可以完美地通过 chrome 运行我的应用程序。国家总是表现出来。在 e2e Protractor 中进行测试时，为什么会抛出此错误？有谁知道？谢谢
通过 Chrome 运行时使用哪个主机？

标签： visual-studio-code protractor e2e-testing

【解决方案1】：

重启VS Code后“No Access-Control-Allow-Origin”的错误消失了……我也弄清楚了为什么第二个“h3 .amount”失败了。这是来自API的报价。我的本地主机比其他开发人员慢。所以我实际上需要让浏览器等待几秒钟以确保报价存在。不知何故，使用“var EC = protractor.ExpectedConditions;”的另一种解决方案对我不起作用.

【讨论】：

【解决方案2】：

解决“No Access-Control-Allow-Origin”的问题编辑文件protractor.conf 并在 chromeOptions 的 args 中添加"--disable-web-security"。

应该有点：

exports.config = {
  params: {
    test: 'hml'
  },
  directConnect: true,
  multiCapabilities: [
    {
      name: 'desktop',
      browserName: 'chrome',
      chromeOptions: {
        args: ['--disable-extensions --disable-web-security']
      },
      specs: ['./e2e/**/*.e2e-spec.ts', './e2e/**/*.e2e-spec.dsk.ts']
    }

【讨论】：