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

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）只能从一个下拉菜单中成功选择元素。

Answer 1

当量角器找到定位器的多个匹配项时，它只使用第一个匹配项。理想的解决方案是在下拉列表中添加唯一ID，因此测试可以锁定。然后select可以移出beforeEach并进入it区块

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

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

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

如果您没有更改页面的自由，您还可以获取ElementArrayFinder中的所有下拉列表和索引，但请注意，这会使您的测试依赖于DOM中下拉列表的顺序，这可能是脆弱的。

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