Protractor 如何在量角器中单击特定文本的父元素

我们的UI代码如下所示

<div _ngcontent-wuu-c29="" class="frx-rule-block ng-star-inserted">
   <div _ngcontent-wuu-c29="" class="frx-rule-header">
      <h4 _ngcontent-wuu-c29="">1</h4>
      <i _ngcontent-wuu-c29="" class="demo-icon"></i>
      <label _ngcontent-wuu-c29="" class="frx-rule-title">Rule Group</label>
   </div>
   <div _ngcontent-wuu-c29="" class="frx-rule-body">
      <div _ngcontent-wuu-c29="" class="frx-rule-descr">
          <h3 _ngcontent-wuu-c29="">Sample rule groups</h3>
          <p _ngcontent-wuu-c29="">Sample description.</p>
      </div>
      <div>--------</div>
   </div>
</div>

1.

规则组
示例规则组
样本说明

--------

---

我们有一个主div，在这个主div的内部有许多子类元素“frx规则块ng star inserted”，如上所述。h3标记中的文本“Sample rule groups”在不同的地方是不同的。“frx规则块ng star inserted”。我需要点击h4标记中的数字1来获得这个特定的h3标记（这个数字每次都在变化，所以我无法指定哪个是h4标记内的文本）。那么我如何选择这个特定的文本“Sample rule groups”并单击h4标记。提前感谢。

有一种方法可以通过xpath选择同级元素，但我不记得了。因此，这里有一个解决方法供您使用：

---

let myElement=element（by.cssContainingTex（“.frx rule title”，“rule Group”）.element（by.xpath（“…））.element（by.xpath（//h4[contains（text（），'1'）]）

有一种方法可以通过xpath选择同级元素，但我记不起来了。这里有一个解决方法：

let myElement=element（by.cssContainingTex（“.frx规则标题”，“规则组”）.element（by.xpath（“…”））.element（by.xpath（//h4[contains（text（），'1'）]）

简短回答

let h4ByText = (text) => element(by.xpath(`//*[@class="frx-rule-body"]//h3[contains(text(),"${text}")]//ancestor::div[contains(@class,"frx-rule-block")]//h4`));

如果你不明白它是如何工作的，我会给你完整的答案

let h4ByText = (text) => element(by.xpath(`//*[@class="frx-rule-body"]//h3[contains(text(),"${text}")]//ancestor::div[contains(@class,"frx-rule-block")]//h4`));

---

如果你不明白它是如何工作的，lmk我会给你完整的答案

我一点也不喜欢使用xpath，所以我会这样做。这样做肯定需要更多的代码和工作，但我会不惜一切代价避免使用xpath。这只是我个人的偏好

const match = 'Sample rule groups';

// get all blocks 
const ruleblocks = element.all(by.css('.frx-rule-block'));

// find the one that contains the header you want
const relevantBlock = await ruleblocks.filter(block => {
  const ruleBodyHeader = block.$('.frx-rule-body > h3');

  return ruleBodyHeader.getText().then(text => {
    return text === match;
  }
}).first();

const ruleHeader = relevantBlock.$('.frx-rule-header > h4');
await ruleHeader.click();

---

我一点也不喜欢使用xpath，所以下面是我的做法。这样做肯定需要更多的代码和工作，但我不惜一切代价避免使用xpath。这只是我个人的偏好

const match = 'Sample rule groups';

// get all blocks 
const ruleblocks = element.all(by.css('.frx-rule-block'));

// find the one that contains the header you want
const relevantBlock = await ruleblocks.filter(block => {
  const ruleBodyHeader = block.$('.frx-rule-body > h3');

  return ruleBodyHeader.getText().then(text => {
    return text === match;
  }
}).first();

const ruleHeader = relevantBlock.$('.frx-rule-header > h4');
await ruleHeader.click();

---

非常感谢…它工作了…我使用了let h4ByText=element（by.xpath（

//*[@class=“frx规则体”]///h3[contains（text（），“示例规则组”）]///祖先：：div[contains（@class，“frx规则块”）]///h4

）；返回browser.executeScript（“参数[0]。click（）；”，h4ByText.getWebElement（）；非常感谢……它工作了……我使用了let h4ByText=element（by.xpath（

//*[@class=“frx规则体”]///h3[contains（text（），“示例规则组”）]///祖先：：div[contains（@class，“frx规则块”）]///h4

）；返回browser.executeScript（“参数[0]。click（）；”，h4ByText.getWebElement（）；