如何用量角器测试农业网格? [英] How to test ag-grid with protractor?

问题描述

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

In my app, I use ag-grid to display the data. I am unsure on how I can select a field within the grid so that I can test if it is there or not. Many of the examples I have found have not been much help. If anybody could guide me in the right direction, that would be great!:) Here is my HTML code:

  <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，则与选择字段最接近.但这并没有太大帮助，因为它仅选择特定用户，因此没有灵活性.谢谢！

And here is an example of how I create my data in my component class. I have figure I must select the array where I am outputting mt data but I cannot seem to figure out how to select the array. The closest I can get to selecting the fields is if I call the class ag-theme-blue. But that is not much help,as it only selects a specific user, there is no flexibility. Thank you!

 columnDefs = [

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

    ];

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

Okay, so I made some progress! It is not a solution but is a step in the right direction :). This line of code, selects the first column in the ag-grid.

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

此行允许我选择特定的索引.

This line here, allows me to select a specific index.

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

此行允许我选择具有给定数据的行.例如，在这里我要查找包含名称"TestName"的行.现在，我可以通过检查是否显示包含TestName的字段来测试是否添加了新字段.为了使此测试更好，我可以分配测试以添加一个非常不同的名称，以确保该名称在数据库中尚不存在.

This line here allows me to select the row with the given data. For example, here I am looking for a row that contains the name "TestName". Now I can test if a new field is added by checking if the field containing TestName is being displayed. To make this test even better, I can assign my test to add a name that is very distinct to ensure that it does not already exist in the database.

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

此网站上的这张图片就是我的网格的样子.

This image on this site is what my grid looks like.

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

使用功能更新了规格:

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




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

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

推荐答案

我想我对您现在想做的事情有很好的了解.

I think I have a good handle on what you are trying to do now.

您可以使用

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

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

Then from here you can find a row that contains the data you are looking for by using .filter(). Probably best to create a generic function that allows you to pass in the rows and the string you are looking for and then return the element once you've found it.

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')，然后一旦找到该行，就可以用它来做您需要的任何事情在那里.

You can call it from your tests: const row = findRow(rows, 'Some Text') and then once you have the row you are looking for you can do whatever you need with it from there.

这是一个更清楚的例子

// 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');
  });
});

如果您使用的是异步/等待，则将是这样

If you are using async/await it would be like this

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');

这篇关于如何用量角器测试农业网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！