量角器找不到类名答案

【问题标题】：protractor cannot find className量角器找不到类名
【发布时间】：2018-03-22 01:24:28
【问题描述】：

我想按类名而不是 css 或 id 选择对象，但我不断收到错误，无法找到 css 选择器，即使我尝试使用类名进行选择。甚至说我也无法使用 css 获取元素。我刚刚设置了量角器，所以也许我错过了什么？ protractor - 版本 5.3.0，我从命令行使用“ng e2e”运行测试文件。

这是我的页面对象：

   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'));

这是我的规范文件

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'));

【问题讨论】：

没有足够的信息来重现...见how to ask
这个类'c-search-submit-button'是否真的存在于你的代码中？我可以想象无实体的类被 CSS 忽略，因此量角器看不到......代码本身看起来不错。
必须有更多这个。我完全照原样复制了您的代码，它给了我一个Element is not clickable at point (x, y) 消息。当我在 div 中添加 button 时，测试变为绿色。你的代码似乎没问题。还有其他原因导致失败。您确定在尝试单击按钮之前导航到了正确的页面吗？
我已经用更多代码更新了我的示例。请任何关于我哪里出错的指示。
尝试在page.getSearchBtn().click() 之前添加一些睡眠browser.sleep(15*1000) // 15 secs。而如果元素在frame里面，需要先切换到frame里面。

标签： angular protractor

【解决方案1】：

在执行此元素之前应用等待元素存在/可见。

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);

【讨论】：

【解决方案2】：

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

参数：

box：元素查找器，材料之父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);

希望这会有所帮助。

【讨论】：

【解决方案3】：

当我第一次开始使用量角器时，我遇到了类似的问题。我尝试了不同的等待语句、可见性等。没有一个对我有用。我听说如果您正在查看的元素在浏览器中不完全可见，那么可能会发生找不到该元素的情况。我所做的只是在我的配置中添加了浏览器功能，如下所示，以使我的浏览器达到最大尺寸。然后它开始作为一种魅力发挥作用。不确定，但如果您尚未尝试，这可能会对您的情况有所帮助。

capabilities: {
'browserName': 'chrome',
chromeOptions: {
 args: ['start-fullscreen','show-fps-counter=true']
}

【讨论】：