量角器：同一頁面上的兩個下拉菜單（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);