Question

我是UI测试用例的新手。我想要做的是在我的角度模板中验证按钮的文本。

以下是我的角度模板文件中可用的按钮控件

<button type="button" class="btn btn-primary" (click)="staticModal.show()">Show/Hide</button>
&nbsp;&nbsp;
<button type="button" class="btn btn-primary" (click)="filterModal.show()">Filter</button>

以下是我的角度测试

it('should have button with text show/hide',()=>{
    const debug=fixture.debugElement;
    const native=debug.nativeElement;
    const buttonElem=native.querySelector('button:contains("show/hide")');
    console.log(native);
    expect(buttonElem.textContent).toContain('Show/Hide');
  });

因为我的模板中有两个按钮，没有任何ID和相同的类。我试图找到带有文本值的右键，但它失败了以下错误 “SyntaxError：无法在'Element'上执行'querySelector'：'button：contains（”show / hide“）'不是有效的选择器。”

测试此方案的正确方法是什么。

编辑：我正在使用Jasmine和karma进行测试。

Answer 1

为我自己的问题提供答案。我尝试了以下解决方案，它对我有用。不确定这是否是最佳方法。

首先我更新了我的HTML代码。已转换＆＃34;按钮＆＃34;元素到＆＃34;输入＆＃34;类型元素。

＆＃13;

<input type="button" class="btn btn-primary" (click)="staticModal.show()" value="Show/Hide"/>
&nbsp;&nbsp;
<button type="button" class="btn btn-primary" (click)="filterModal.show()">Filter</button>

＆＃13;

第二我修改了我的测试用例如下。

＆＃13;

it('should have button with text show/hide',()=>{
    const debug=fixture.debugElement.query(By.css('input[value="Show/Hide"]'));
    const native=debug.nativeElement;
    const buttonElem=native;    
    expect(buttonElem.value).toContain('Show/Hide');
  });

＆＃13;

这对我有用。

Answer 2

由于fixture.debugElement.query(By.css('button[textContent="Show/Hide"]')和fixture.nativeElement.querySelector('button[textContent="Show/Hide"]')都不适合我，因此我使用了谓词功能：

const buttonDebugElement = fixture.debugElement.query(
  debugEl => debugEl.name === 'button' && debugEl.nativeElement.textContent === 'Show/Hide'
);

此处在Angular文档中对此进行了描述：https://angular.io/guide/testing-utility-apis#debugelement

使用By.css帮助器和queryAll的另一种方法：

const buttonDebugElement = fixture.debugElement.queryAll(By.css('button').find(
  buttonDebugEl => buttonDebugEl.nativeElement.textContent === 'Show/Hide'
);

请注意，文本比较区分大小写！

Answer 3

试试这个

it('should have button with text show/hide',()=>{
 const debug=fixture.debugElement;
 const native=debug.nativeElement;
 const buttonElem=debug.query(By.css('button[textContent=show/hide]')); // change selector here
 expect(buttonElem.textContent).toContain('Show/Hide');
});

如何在单元测试用例中使用角度2中的文本找到右键

3 个答案: