Question

我正在使用Protractor对Angular应用程序构建一些测试操作。我试图让我的定位器尽可能易于阅读和维护，并试图使用“元素链”来做到这一点。根据我在SO和Protractor文档中阅读的所有内容，我认为以下定位策略应该有效：

xpPanelPayment变量的定义只是为了便于阅读。

let xpPanelPayment = "//div [@class='panel-heading' and text()='Payment']/following-sibling::div [@class='panel-body']";   
this.pnlPayment = element(by.xpath(`${xpPanelPayment}`));
this.valTotalPayment = element(by.xpath(`${xpPanelPayment}`))
    .element(by.xpath(`//strong [text()='Total Payment:']/../following-sibling::div/strong`));

我更喜欢的是：

this.valTotalPayment = this.pnlPayment
    .element(by.xpath(`//strong [text()='Total Payment:']/../following-sibling::div/strong`));

但是当我尝试这个时，我得到一个错误，似乎表明this.pnlPayment未定义。也许这是一个线索？

以下是使用这些定位器的方法：

const Receipt = require('./Receipt.js').Receipt;

exports.verifyTotalPayment = (payment) => {
    it(`Receipt Validation - Verify total payment $${payment}`, () => {
        console.log(`Receipt.pnlPayment.locator() = '${Receipt.pnlPayment.locator()}'`);
        console.log(`Receipt.valTotalPayment.locator() =         
'${Receipt.valTotalPayment.locator()}'`);
        expect(Receipt.valTotalPayment.getText()).toEqual(`$${payment}`);
    });
}

以下是运行日志的内容：

Receipt.pnlPayment.locator() = 'By(xpath, //div [@class='panel-heading' and text()='Payment']/following-sibling::div [@class='panel-body'])'
Receipt.valTotalPayment.locator() = 'By(xpath, //strong [text()='Total Payment:']/../following-sibling::div/strong)'
[09:31:07] W/element - more than one element found for locator By(xpath, //strong [text()='Total Payment:']/../following-sibling::div/strong) - the first result will be used

似乎完全忽略了valTotalPayment的“父”部分。我的valTotalPayment规范出了什么问题？如果我在不引用父对象的情况下使用整个xpath字符串，那么valTotalPayment会找到正确的元素，但这会使我想要做的事情失败。

Answer 1

问题来自valTotalPayment的xpath。您希望从valTotalPayment的后代中找到pnlPayment。

您使用//但.//用于valTotalPayment。

//表示整页的任何元素节点

.//表示前一个/父元素

的任何后代元素节点

最后，CSS选择器是编写定位器时的第一个选项，xpath是第二个。

如果需要，您可以在元素链中混合使用Css选择器和xpath：element(by.css()).element(by.xpath()).element(by.css())....

Answer 2

它对我有用：

{{1}}

量角器链接对我不起作用

2 个答案: