如何通过多个文本匹配单击一个元素？

Question

我有一些有不同领域的卡片。文本看起来像这样。

梗犬

2 岁

雷克斯的名字

位置科罗拉多

我需要通过多个文本匹配一张卡片。所以element(by.cssContainingText('#age', 'Age 2')) 不是很有帮助，因为我还需要 '#location' 来匹配 'Colorado'。

我尝试的是链接element.all(by.cssContainingText('#card','Age')).element.all(by.cssContainingText('#location', 'Colorado'))，但它似乎不起作用而且非常混乱。 最终目标是点击匹配的第一张卡片。

我还尝试创建一个与文本匹配的函数。但是，如果第一次点击后有多个匹配项，它也会尝试点击下一个匹配项，我会收到一个过时的元素错误。

public clickDogCardByAgeAndLocation(age: string, location: string) {
      common.waitForElement($('dog-card'));
      $$('dog-card').each(element => {
        element.getText().then(text => {
          if (text.includes(age) && text.includes(location)) {
            console.log('CARD SUCCESS');
            element.click();
          }
        });
      });
  }

我相信有一种更优雅的方法可以做到这一点。 谢谢！

Answer 1

如果您的所有文本都在一个元素上，您可以使用 xpath 查找多个条件，如下所示：

//p[contains(text(),'I am')][contains(text(),'more elegant')][contains(text(),'do this')]

例如，与您的最后一行匹配：

如果您的文本跨越多个子元素，您可以通过像这样包装该标识符来选择父卡：

//div[p[contains(text(),'I am')][contains(text(),'more elegant')][contains(text(),'do this')]]

这就是 div 包含的 p 包含那些文本条件。

还有一些 xpath 修饰符可以更容易地阅读这样的和和或：

//p[contains(text(),'I am') and contains(text(),'more elegant')]

您可以在此页面上尝试所有这些 :-)

如果您有更复杂的对象，请分享您的 html，我可以提供更定制的帮助。