Question

我想通过className和NOT css或id选择对象，我继续得到错误，无法找到css选择器，即使我试图用className选择。甚至说我也不能用css获得元素。我刚刚设置了量角器，所以也许我错过了什么？量角器 - 版本5.3.0，我运行测试文件使用＆＃39; ng e2e＆＃39;从命令行。

这是我的页面对象：

   import { browser, by, element } from 'protractor';

export class AppPage {
  navigateTo() {
    return browser.get('https://mywebsite.com');       
  }

  getSearchBtn() {
    return element(by.className('c-search-form-button'));

这是我的spec文件

import { AppPage } from './app.po';
import { browser, by, element } from 'protractor';
import {Config} from 'protractor';

  describe('playground', () => {
    let page: AppPage;
  ;

  beforeEach(() => {
    page = new AppPage();
    browser.waitForAngularEnabled(false);  // must have if non-angular site  
    page.navigateTo();   // or browser.get(url);  //or browser.get('https://website.com');

  });

   it('click the search button', () => {
    page.getSearchBtn().click();

  });

});

错误

- Failed: No element found using locator: By(css selector, .c-search-form-button)

对象

<div class="c-search-form"> 
<push-button class="c-search-form-button">
...
</push-button>

我也试过

element(by.className('c-search-form')); 
element(by.className('c-search-form-button')); 
element(by.css('.c-search-form-button')); 
element(by.css('.c-search-form'));
element(by.tagName('push-button'));

Answer 1

在执行此元素之前，等待elment presence / visbile等。

var EC = protractor.ExpectedConditions;
// Waits for the element with class 'c-search-form-button' to be visible on the dom.
browser.wait(EC.visibilityOf($('.c-search-form-button')), 15000);

Answer 2

我有同样的问题，所以我找到了这个解决方案：这是我分析是否选中材料复选框的功能：

参数：

box：element finder，材料之父mat-checkbox（例如，seg-checkbox元素）;
boxname：如果找不到则只传递日志错误的名称;
选中：如果传递为false，则分析是否未选中复选框。

export async function checkCheckBoxChecked(box: ElementFinder, boxname: string, checked?: any) {
  if (checked === false) {
    try {
      zzz(2000);
      const check = await box.element(by.xpath('./mat-checkbox'));
      const cls = await check.getAttribute('class');
      expect(cls + ' - ' + boxname).not.toMatch('mat-checkbox-checked - ' + boxname);
    } catch (e) {
      expect('not found element ' + boxname).toEqual('!!!');
    };
  } else {
    try {
      zzz(2000);
      const check = await box.element(by.xpath('./mat-checkbox'));
      const cls = await check.getAttribute('class');
      expect(cls + ' - ' + boxname).toMatch('mat-checkbox-checked - ' + boxname);
    } catch (e) {
      expect('not found element ' + boxname).toEqual('!!!');
    };
  }
};

HTML文件

<seg-checkbox _ngcontent-c39="" align="start" name="flagInfo" _nghost-c38="" class="ng-touched ng-dirty ng-valid ng-empty">
  <mat-checkbox _ngcontent-c38="" class="mat-checkbox mat-accent mat-checkbox-anim-checked-unchecked" id="mat-checkbox-2">
...
  </mat-checkbox>
</seg-checkbox>

所有事情都由getAttribute('class');

完成

PS：zzz(2000)只需browser.sleep(2000);
PPS：有时expect(cls + ' - ' + boxname).toMatch('mat-checkbox-checked - ' + boxname);无效，因此您只需使用：expect(cls).toMatch('mat-checkbox-checked);

希望这会有所帮助。

Answer 3

当我第一次开始使用量角器时，我遇到了类似的问题。我尝试了不同的等待声明，可见性等。没有对我有用。在某个地方，我听说如果您正在寻找的元素在浏览器中不完全可见，那么这可能发生在找不到该元素的情况。我所做的只是在我的配置中添加了浏览器功能，如下所示，以使我的浏览器最大化。然后它开始作为一个魅力。不确定但如果您还没有尝试过，这可能对您的情况有所帮助。

{ "number" : 2.342 }
{ "number" : 2.001 }
{ "number" : 2.001 }

量角器找不到className

3 个答案: