Question

In other words, I have just selected a dropdown option successfully; however, I would like to now assert that the option text is the expected value.

Note that I have selected the dropdown option value with elementSwitcher.element(by.linkText(option)).click() below :

this.selectDropdown = function (name, option, uniqueId) {
        
        var elem = element(by.id(uniqueId));

        var elementSwitcher = elem.element(by.css("div[uib-dropdown]"));        
        elementSwitcher.element(by.css("button[uib-dropdown-toggle]")).click();
                
        elementSwitcher.element(by.linkText(option)).click().then(function () {
            var el = elementSwitcher.element(by.tagName('a')).getText();
            console.log('*** JUST CLICKED. el text =  ', el);
        });               

    };

and the rendered HTML looks something like this :

<div class="btn-group dropdown open" uib-dropdown="">
 <ul class="dropdown-menu accounts-dropdown" uib-dropdown-menu="" aria-labelledby="simple-dropdown">
   <li ng-repeat="accountChoice in ctrl.accountOptions" class="ng-scope">
     <a ng-click="ctrl.selectOption(accountChoice)" class="ng-binding">Assets</a>
   </li>
 </ul>
</div>

Problem is that I'm not getting access to the Assets text I would expect, and my console.log() is telling me:

W/element - more than one element found for locator By(css selector,
a) - the first result will be used
  *** JUST CLICKED. el text =   ElementFinder {
 browser_:
  ProtractorBrowser {
    controlFlow: [Function],

Again, I would like to click the dropdown element (a tag), then get the text part of that same a tag which was clicked.

Advice is appreciated.

**** UPDATE ****

As per Alex's answer below, I post my final helper function:

    /**
     * Helper function to select an angular-ui dropdown option, and return the <a> link text which was selected.
     * 
     * @param name
     * @param option
     * @param uniqueId
     * 
     * @returns {Promise} A promise that returns the link text when resolved.
     */
    this.selectUibDropDownOption = function (name, option, uniqueId) {
        var deferred = protractor.promise.defer();

        var elem = element(by.id(uniqueId));      // i.e. by.id('drpAccount')

        var elementSwitcher = elem.element(by.css("div[uib-dropdown]"));     
        elementSwitcher.element(by.css("button[uib-dropdown-toggle]")).click();
        
        // i.e. by.linkText('Liabilities and Equity')
        //elementSwitcher.element(by.linkText(option)).click();  // also works, but doesn't get link text

        var link = elementSwitcher.element(by.linkText(option));

        // Important to first get the text of the <a> tag, then click on the link.
        link.getText().then(function (linkText) {            
            link.click();            
            deferred.fulfill(linkText);
        });
 
        return deferred.promise;
    };

and from the calling function, where my describe/it is defined :

var specItem = it(item.name, function () {             
    item.search.map(function (srchItem) {

        // i.e. { "name": "Account", "option": "Assets", "uniqueId": "drpAccount" },
	var optionText = pageObjects.selectUibDropDownOption(srchItem.name, srchItem.option, srchItem.uniqueId);
	
	optionText.then(function (linkText) {
	    console.log('** Clicked on: ', linkText);
	    expect(srchItem.option).toEqual(linkText);
	});
    });
});

Answer 1

您在控制台上看到的是承诺的字符串表示形式 - elementSwitcher.element(by.tagName('a')).getText().then(function (linkText) { console.log('*** JUST CLICKED. el text = ', linkText); }); // or elementSwitcher.element(by.tagName('a')).getText().then(console.log);返回承诺。如果要查看实际的链接文本值，解析承诺：

var link = elementSwitcher.element(by.linkText(option));
link.getText().then(function (linkText) {
    console.log(linkText);
    link.click();
});

另外，如果你得到＆＃34;陈旧元素参考＆＃34;或＆＃34;未找到元素＆＃34;错误，您可能需要在实际点击链接之前获取文本。

或者，为什么不这样做 - 通过链接文本找到链接，获取文本并单击它：

import React, { Component } from 'react';
import {
  Picker,
} from 'react-native';

export default class TestComponent extends Component {

  render() {
    return (
      <Picker
        selectedValue={this.props.asset.type}
        onValueChange={this.props.onTypeChange}>
        <Picker.Item label="Type of asset" value="default" />
        <Picker.Item label="Car" value="car" />
        <Picker.Item label="Boat" value="boat" />
        <Picker.Item label="Ship" value="ship" />
      </Picker>
    );
  }
}

量角器 - 如何获取<a> tag that was clicked

1 个答案: