量角器 - 如何获取被点击的 <a> 标签的文本
Protractor - How to get the text of the <a> tag that was clicked
也就是说,我刚刚成功选择了一个下拉选项;但是,我现在想断言选项 text
是预期值。
请注意,我在下面选择了 elementSwitcher.element(by.linkText(option)).click()
的下拉选项值 :
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);
});
};
渲染后的 HTML 看起来像这样:
<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>
问题是我无法访问我期望的 Assets
文本,而我的 console.log()
告诉我:
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],
同样,我想单击下拉元素(a
标签),然后获取被单击的同一 a
标签的 text
部分。
不胜感激。
**** 更新 ****
根据下面 Alex 的回答,我 post 我的最终辅助函数:
/**
* 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;
};
以及调用函数,其中定义了我的 describe/it
:
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);
});
});
});
您在控制台上看到的是承诺的字符串表示形式 - getText()
returns 承诺。如果您想查看实际的 link 文本值,解决承诺:
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);
此外,如果您收到 "stale element reference" 或 "element not found" 错误,您可能需要在实际单击 link 之前获取文本。
或者,为什么不这样做 - 通过 link 文本找到 link,获取文本并单击它:
var link = elementSwitcher.element(by.linkText(option));
link.getText().then(function (linkText) {
console.log(linkText);
link.click();
});
也就是说,我刚刚成功选择了一个下拉选项;但是,我现在想断言选项 text
是预期值。
请注意,我在下面选择了 elementSwitcher.element(by.linkText(option)).click()
的下拉选项值 :
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);
});
};
渲染后的 HTML 看起来像这样:
<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>
问题是我无法访问我期望的 Assets
文本,而我的 console.log()
告诉我:
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],
同样,我想单击下拉元素(a
标签),然后获取被单击的同一 a
标签的 text
部分。
不胜感激。
**** 更新 ****
根据下面 Alex 的回答,我 post 我的最终辅助函数:
/**
* 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;
};
以及调用函数,其中定义了我的 describe/it
:
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);
});
});
});
您在控制台上看到的是承诺的字符串表示形式 - getText()
returns 承诺。如果您想查看实际的 link 文本值,解决承诺:
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);
此外,如果您收到 "stale element reference" 或 "element not found" 错误,您可能需要在实际单击 link 之前获取文本。
或者,为什么不这样做 - 通过 link 文本找到 link,获取文本并单击它:
var link = elementSwitcher.element(by.linkText(option));
link.getText().then(function (linkText) {
console.log(linkText);
link.click();
});