Транспортир: Два выпадающих меню (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

Когда транспортир находит несколько совпадений для локатора, он просто использует первый. Идеальным решением было бы добавить уникальные идентификаторы в раскрывающиеся списки, чтобы у теста было что-то, к чему можно привязаться. Затем 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);