量角器：同一页面上的两个下拉菜单（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);

  })
})

I have tried this, but it doesn't handles the second dropdown. How do I proceed to the next dropdown? The second 'it' block is for handling the second dropdown. Two drop down menus(angularJS) on the same page, can only successfully select element from one dropdown menu.

Answer 1

When protractor finds multiple matches for a locator, it just uses the first one. The ideal solution would be to add unique IDs to the dropdowns, so the test has something to latch on to. The select could then be moved out of the beforeEach and into the it block as

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

Or if you prefer the $ alias:

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

If you don't have the freedom to change the page, you could also get all dropdowns and index into the ElementArrayFinder, but be aware that this makes your test dependent on the order of the dropdowns in the DOM, which could be fragile.

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