量角器元素链接对我不起作用

Question

我正在使用量角器针对 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

问题来自您的 xpath for valTotalPayment. 您希望找到valTotalPaymentfrompnlPayment的后代。

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

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

./ 表示前一个/父元素的任何后代元素节点

最后，CSS 选择器是编写定位器时的首选，xpath 是其次。

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