Question

在我的应用中，我使用ag-grid显示数据。我不确定如何在网格中选择一个字段，以便我可以测试它是否存在。我发现的许多例子都没有太多帮助。如果有人可以指导我朝着正确的方向发展，那就太棒了！:)这是我的HTML代码：

  <div style="height: 90%; text-align: left">
<ag-grid-angular enableColResize groupHeaders style="width: 100%; height: 100%;" [gridOptions]="gridOptions" (gridReady)="onGridReady($event)"
  class="ag-theme-blue" [rowData]="rowData" [columnDefs]= "columnDefs" [enableSorting]="true"
  [animateRows]="true" [rowSelection]="rowSelection">
</ag-grid-angular>

以下是我在组件类中创建数据的示例。我想我必须选择我输出mt数据的数组，但我似乎无法弄清楚如何选择数组。我最接近选择字段的方法是，如果我将类称为ag-theme-blue。但这没有多大帮助，因为它只选择一个特定的用户，没有灵活性。谢谢！

 columnDefs = [

        { headerName: 'First Name', field: 'FirstName' },

    ];

编辑：好的，所以我取得了一些进展！它不是一个解决方案，但是朝着正确的方向迈出了一步:)。这行代码选择ag-grid中的第一列。

return element(by.css('div.ag-body-container > [role="row"]'))

这一行允许我选择一个特定的索引。

 return element.all(by.css('div.ag-body-container > [role="row"]')).get(2);

这一行允许我选择具有给定数据的行。例如，在这里，我正在寻找一个包含名称＆＃34; TestName＆＃34;的行。现在我可以通过检查是否显示包含TestName的字段来测试是否添加了新字段。为了使这个测试更好，我可以指定我的测试来添加一个非常独特的名称，以确保它在数据库中不存在。

return element.all(by.cssContainingText('div.ag-body-container > [role="row"]', 'TestName'))

此网站上的此图片就是我的网格图片。

http://www.adaptabletools.com/ag_Grid_implementation_available.html

编辑2：更新了具有功能的规范：

  it('should select name field', () => {




  findRow(page.rows, "TestName").then(row => {

    row.getText().then(rowText => {
      expect(rowText).toContain('TestName')

Answer 1

我想我已经很好地处理了你现在要做的事情。

您可以使用

获取网格中所有行的列表

let rows = element.all(by.css('div.ag-body-container > [role="row"]'));

然后，从这里，您可以使用.filter()找到包含您要查找的数据的行。可能最好创建一个通用函数，允许您传入要查找的行和字符串，然后在找到它后返回该元素。

findRow(elements, matcher) {
  const relevantRow = elements.filter(element => {
    return element.getText().then(text => {
      return text.includes(matcher);
    });
  })
  .first()

  return relevantRow;
}

你可以从你的测试中调用它：const row = findRow(rows, 'Some Text')然后一旦你有了你正在寻找的行，你可以从那里做任何你想做的事。

编辑：这是一个更清晰的例子

// in your page object
public rows = element.all(by.css('div.ag-body-container > [role="row"]'));

// in some helper class
function findRow(rows, matcher) {
  return elements.filter(element => {
    return element.getText().then(text => {
      return text.includes(matcher);
    });
  })
  .first()
}

//in your test
helper.findRow(somePage.rows, 'Some Text').then(row => {
  row.getText().then(rowText => {
    expect(rowText).toContain('Some Text');
  });
});

如果你使用的是async / await，那就像这样

function async findRow(rows, matcher) {
  const relevantRow = await rows.filter(row => {
    return row.getText().then(text => {
      return text.includes(matcher);
    });
  }).first();

  return relevantRow;
}

//in spec
const row = await helper.findRow(somePage.rows, 'Some Text');
expect(await row.getText()).toContain('Some Text');

Answer 2

不完美，这似乎可以解决问题：

return element.all(by.cssContainingText('div.ag-body-container > [role="row"]', 'TestName'))

现在我只需要弄清楚如何从字段中检索数据。

如何使用量角器测试ag-grid？

2 个答案: