量角器+故事书：失败：使用定位器找不到元素：By（css选择器）

Posted 2023-02-19

【中文标题】量角器+故事书：失败：使用定位器找不到元素：By（css选择器）

【英文标题】：Protractor + Storybook: Failed: No element found using locator: By(css selector)

【发布时间】：2021-01-16 10:15:32

【问题描述】：

我正在尝试使用 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 之间是否存在我不知道的兼容性问题？

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

【问题讨论】：

您是否尝试将其直接指向 iFrame src？例如http://localhost:6006/iframe.html?id=story--components-contact-form--default&viewMode=story

是的，Storybook 的开发人员也说过要在他们的 Github 论坛上尝试，但仍然无法访问该 URL。

【参考方案1】：

很多原因：

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

【讨论】：

@SergeyPlesakov 感谢您的回复！我进行了适当的更改，但仍然遇到相同的错误。您的意思是使用 browser.wait() 等待页面或其他内容的时间足够长吗？

是的，试试这个protractortest.org/#/…