0

我正在尝试使用 Protractor 对 Storybook 的 UI 组件进行 e2e 测试。任何使用定位器在页面上查找元素的尝试都会在终端中显示错误，指出无法使用量角器定位器找到该元素，即（by.css、by.id 和 by.className）。但是，在运行涉及按钮文本的测试时，它们成功通过且没有错误。

重现

重现行为的步骤：要重现问题，必须在使用 Angular 的故事书项目中安装量角器。运行量角器命令开始测试。

测试失败并在终端中出现此错误：失败：使用定位器找不到元素：By（css选择器）

预期行为

预期的行为是在屏幕上定位输入字段并将文本传递到输入字段以检查该输入的值是否等于特定值。

代码：

conf.js: 

exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'],
  capabilities: {
    browserName: 'chrome'
  }
}


forms-spec.js: 

describe('Contact Form', function() {
    browser.waitForAngularEnabled(false);
    browser.ignoreSynchronization = true;
    it('should allow me to enter a first name', async() => {
    await browser.get('http://localhost:6006/?path=/story/components-contact-form--default');

    let text = element(by.css('input'));
    element(by.css('input')).sendKeys('Rohtas');
    expect(text.getAttribute('value')).toEqual('Rohtas');
      
    });

  })
Error: NoSuchElementError: No element found using locator: By(css selector, input)

HTML：

<input placeholder="name" type="text">

System:
OS: Windows 10 10.0.17763
CPU: (8) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
Binaries:
Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 83.0.4103.97
Edge: Spartan (44.17763.831.0)
npmPackages:
@storybook/addon-a11y: ^5.3.19 => 5.3.19
@storybook/addon-actions: ^5.3.19 => 5.3.19
@storybook/addon-docs: ^5.3.19 => 5.3.19
@storybook/addon-jest: ^5.3.19 => 5.3.19
@storybook/addon-knobs: ^5.3.19 => 5.3.19
@storybook/addon-links: ^5.3.19 => 5.3.19
@storybook/addon-notes: ^5.3.19 => 5.3.19
@storybook/addon-storysource: ^5.3.19 => 5.3.19
@storybook/addon-viewport: ^5.3.19 => 5.3.19
@storybook/addons: ^5.3.19 => 5.3.19
@storybook/angular: ^5.3.19 => 5.3.19
@storybook/storybook-deployer: ^2.8.6 => 2.8.6

附加上下文

如果我将类名或 ID 添加到输入字段，并尝试使用任一方法进行定位，则会出现相同的错误。但是，在 Protractor API 的按钮上使用 buttonText 或 partialButtonText 可以正常工作。Protractor 和 Storybook 之间是否存在我不知道的兼容性问题？

故事书 iFrame 可能会妨碍查找元素，但我不确定是否有解决方法。

4

1 回答 1

0

很多原因：

  • browser.waitForAngularEnabled(false);需要await
  • await browser.waitForAngularEnabled(false);应该进去it
  • browser.ignoreSynchronization = true;可以删除。阅读官方文档，而不是互联网上的论坛，它已被删除
  • element(by.css('input')).sendKeys('Rohtas');是承诺和需要await
  • 但是在发送密钥之前，请确保等待页面加载足够长的时间，可能您只需要等到输入出现并且可见（也许可点击也可以）
于 2020-09-30T19:34:48.563 回答