如何通过innerHtml查找元素

Question

This question 与我的标题相似，但在我的情况下，我需要找到一个基于 innerHtml 的元素，而不是找到 <T> 类型的元素并查看它的 innerHtml。

在下面的元素中，唯一标识 div 的唯一方法是基于其 innerHtml。我无法添加 id，因为那太容易了。如何在debugElement.query 语句中找到 div？

html:

<div *ngIf="isOn">Hello</div>

测试：

  it('#clicked() should toggle #isOn', () => {
    const comp = component;
    comp.click();
    fixture.detectChanges();
    const div = fixture.debugElement.query(By.css('[innerHTML] === "Hello"')); // wrong 

    const div2 = fixture.debugElement.query(x => x.attributes['innerHtml'] === "Hello"); // also wrong

    const div3 = fixture.debugElement.query(x => x.attributes['text'] === "Hello"); // also wrong


    expect(div).toBeTruthy();
  });

Answer 1

两件事...

首先，这看起来像一个单元测试，所以它不应该与 Protractor 有任何关系。在 Protractor 和 Angular TestBed 之间查找 innerHTML 的方式完全不同。例如，在 Protractor 中，您可以选择使用 by.cssContainingText(selector, someText)。 Angular API 没有这些。您正在使用的By 是这个（不是量角器）：https://angular.io/api/platform-browser/By

据我所知，不可能使用纯 css 以这种方式查找元素。您也许可以使用一些 jQuery 魔法来找到它，但这比您真正需要的要复杂得多。

---

其次，添加 id 属性并没有什么“太容易”的地方。这正是它应该做的。没有合乎逻辑的理由不这样做。如果这是某种测试或其他东西，而您真的无法添加它，那只是一个荒谬的问题。您可以尝试改用 xpath 选择器。我很确定有一种方法可以使用 xpath 通过一些部分文本来查找元素。我会让你弄清楚如何做到这一点。在任何情况下，都不能使用普通的 css 方法来完成。最好和最简单的解决方案如下所示：

<div *ngIf="isOn" id="someId">Hello</div>


it('#clicked() should toggle #isOn', () => {
  const comp = component;
  comp.click();
  fixture.detectChanges();
  const div = fixture.debugElement.query(By.css('#someId'));

  expect(div.innerHTML).toEqual('Hello');
});

Answer 2

您可以使用 xpath 来实现您正在做的事情

文本完全匹配

//div[text()="Hello"]

部分文本匹配

//div[contains(text(),"Hello")]

还有这个。我不完全确定它匹配的是什么

//div[contains(.,"Hello")]

Answer 3

你可以试试这样的：

const div = fixture.debugElement.query(By.css('div')).nativeElement;
expect(div.innerHTML).toContain('Hello');