如何使用 TestCafe 与 ag-Grid 进行交互

Question

我想使用 TestCafe 与 ag-Grid 数据进行交互，没有任何框架，如 Mocha、Jasmine 等，有什么办法吗？

任何帮助将不胜感激。

提前致谢。

Answer 1

我检查了the ag-Grid demo page，它与 TestCafe 一起正常工作：

import { Selector } from 'testcafe';

fixture `Fixture`
    .page `https://www.ag-grid.com/example.php`;

test('test', async t => {
    const filterInput       = Selector('#myGrid > div > div.ag-root-wrapper-body.ag-layout-normal.ag-focus-managed > div.ag-root.ag-unselectable.ag-layout-normal > div.ag-header.ag-focus-managed.ag-pivot-off > div.ag-header-viewport > div > div.ag-header-row.ag-header-row-floating-filter > div:nth-child(1) > div.ag-floating-filter-body > div > input');
    const selectAllCheckbox = Selector('#ag-input-id-63');

    const cellTonySmith     = Selector('#myGrid').find('span').withText('Tony Smith');
    const checkboxTonySmith = cellTonySmith.parent().child(1);

    const cellTonyGunner     = Selector('#myGrid').find('span').withText('Tony Gunner');
    const checkboxTonyGunner = cellTonyGunner.parent().child(1);

    await t
        .typeText(filterInput, 'Tony')
        .hover(cellTonySmith)
        .click(checkboxTonySmith)
        .hover(cellTonyGunner)
        .click(checkboxTonyGunner);

    await t
        .debug();
});

UPD：

我想点击属于英文的名字

import { Selector } from 'testcafe';

fixture `Fixture`
    .page `https://www.ag-grid.com/example.php`;

test('test', async t => {
    const englishCells = Selector('div').withAttribute('col-id', 'language').withText('English');

    const firstEnglishCell              = englishCells.nth(0);
    const nameRelatedToFirstEnglishCell = firstEnglishCell.parent().child(0).child(0).child(-1);

    const secondEnglishCell              = englishCells.nth(1);
    const nameRelatedToSecondEnglishCell = secondEnglishCell.parent().child(0).child(0).child(-1);

    await t
        .click(nameRelatedToFirstEnglishCell)
        .click(nameRelatedToSecondEnglishCell)
        .debug();
});