javascript - 在 Protractor 测试中引用html元素

Question

我正在 Protractor 中测试一个 Angular 应用程序。我正在尝试访问 html 表单的元素。

我的表单中有这个标签:

 <label  #name   class="form-control-label" id='#name'  for="field_nombre" >Nombre</label>

这个调用模板 url 的组件是这样的:

   template: require('./paciente-dialog.component.html'),

现在，当我转到此 html 表单时，应用程序的 url 是 'http://localhost:8080/#/paciente'

所以我创建了这个 po.ts 文件，它将我带到这个 url 并想要输出我拥有的标签:

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

export class AppPage {
  navigateTo() {
    return browser.get('http://localhost:8080/#/paciente');
  }

  getParagraphText() {
    //return element(by.css('app-root h1')).getText();
    return element(by.css('#name')).getInnerHtml;
  }
}

import { AppPage } from './app.po';


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

  beforeEach(() => {
    page = new AppPage();
  });
  it('should display welcome message', () => {


    page.navigateTo();

    console.log('This is the label'+ page.getParagraphText() );

    }

现在它打印 undefined 而不是标签名称。我在 Jasmine 测试中做了同样的事情并且它有效。我做错了什么吗？

Answer 1

与 Jasmine 相比，Protractor 的行为和 react 略有不同。以这种方式尝试:

HTML(注意没有散列的 id 属性)

<label  #name  class="form-control-label" id="name"  for="field_nombre" >Nombre</label>

AppPagePO

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

getParagraphText(): ElementFinder {
    return element(by.id(name));
}

测试

page.getParagraphText().getAttribute('value').then( text => {
    console.log('This is the label ' + text);
});