dropdown select by visible text

问题:

I can select by index:

let options= element(by.xpath("//select[@id='example']")).$('[value="1"]').click();

Is there the way to select by visible text?

回答1:

Use element(by.cssContainingText('cssSelector','YourTextHere'));
Here is the API for it.

For example, if your html looks like this (using question title):

<a href="/questions/49194963/dropdown-select-by-visible-text" 
class="question-hyperlink">dropdown select by visible text</a>

You would find it like:

element(by.cssContainingText('a','dropdown select by visible text');

However, this might cause problems with certain dropdown menus if the entire list is not displayed at once. A way I have gotten around this with many dropdowns is "typing" into them. Most dropdowns will select the matching element if you begin to type, and then you can select the highlighted element with browser.actions().sendKeys(protractor.Key.ENTER).perform();

回答2:

The option above is right but not fully, it will only affirm current text's presence in an element, not its visibility.

You wanna be sure that the text is visible on a page. If you already use async/await I'd recommend doing like this:

let options= element(by.xpath("//select[@id='example']")).$('[value="1"]');
await expect(options.getText()).toBe('Your Text', 'TextError if not found');
const textVisible = EC.visibilityOf(options)
await browser.wait(textVisible, 5000);