量角器：同一页面上的两个下拉菜单（angularJS），只能成功从一个下拉菜单中提取select个元素

Question

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

var path = require('path');


describe('TC:Create Units Component/Reset Button', () => {

  let select: ElementFinder;

  beforeEach(() => {
    browser.get('http://localhost:4200/content/createunits');
    select = element(by.tagName('ng-select'));
  });

  it('should be rendered', async () => {
    expect(select).toBeDefined();

    //Reset button
    select.element(by.css('.ng-select-container')).click();
    expect(select.getAttribute('class')).toMatch('ng-select-opened');
    //select.element(by.css('.ng-select-container')).click();
    //TO SELECT A PARTICULAR OPTION IN THE LIST
    element.all(by.css('.ng-option')).filter(async function(element, index) {
      const text = await element.getText();
      return text === 'compA1';
    }).first().click();
    browser.sleep(1000);
  })
  it('should be rendered', async () => {
    expect(select).toBeDefined();
    select.element(by.css('.ng-select-container')).click();
    expect(select.getAttribute('class')).toMatch('ng-select-opened');
   // select.element(by.css('.ng-select-container')).click();
    //TO SELECT A PARTICULAR OPTION IN THE LIST
    element.all(by.css('.ng-option')).filter(async function(element, index) {
      const text = await element.getText();
      return text === 'LF1';
    }).first().click();
    browser.sleep(1000);



    element(by.id('unitName')).sendKeys('dummy unit');
    browser.sleep(1000);
    element(by.id('description')).sendKeys('dc');
    browser.sleep(1000);
    var registerButton = element(by.buttonText('Reset'));
    var s = registerButton.click();
    browser.sleep(1000);

  })
})

我试过了，但它无法处理第二个下拉菜单。我如何进入下一个下拉菜单？第二个 'it' 块用于处理第二个下拉列表。同一页面上的两个下拉菜单(angularJS)，只能成功从一个下拉菜单中提取select个元素。

Answer 1

当量角器为定位器找到多个匹配项时，它只使用第一个。理想的解决方案是将唯一 ID 添加到下拉列表中，这样测试就可以抓住一些东西。然后可以将 select 移出 beforeEach 并移入 it 块，如

select = element(by.id('myFirstDropdown'));
select = element(by.id('mySecondDropdown'));

或者如果您更喜欢 $ 别名：

select = $('#myFirstDropdown');
select = $('#mySecondDropdown');

如果您没有更改页面的自由，您也可以将所有下拉菜单和索引放入 ElementArrayFinder，但请注意，这会使您的测试依赖于 [=23] 中下拉菜单的顺序=], 这可能很脆弱。

select = element.all(by.tagName('ng-select')).get(0);
select = element.all(by.tagName('ng-select')).get(1);

量角器：同一页面上的两个下拉菜单（angularJS），只能成功从一个下拉菜单中提取select个元素

Protractor: Two drop down menus(angularJS) on the same page, can only successfully select element from one dropdown menu

javascript

jasmine

angularjs

protractor

e2e-testing