Select 在 testcafe 中打开的第 N 个模态的确定按钮

Question

我在测试中打开了两个模式，我希望能够单击第二个模式中的 "OK" 按钮（下面 [=22= 中的第二个 selected 元素]).

我当前的代码是：

import { waitForReact } from 'testcafe-react-selectors';
import { Selector } from 'testcafe';

fixture `App tests`
    .page('http://localhost:3000/')
    .beforeEach(async () => {
        await waitForReact();
    });

test('Can open and accept all pop ups', async t => {

    //open first modal
    await t
        .click('#LayerAddingPopUpButtonID');

    //select OK button from first modal
    const modalOKButton = Selector('div.ant-modal')
        .find('div.ant-modal-footer')
        .find('button.ant-btn-primary');

    //click OK button from first modal
    await t
        .expect(modalOKButton.with({visibilityCheck: true}).exists)
        .ok({timeout: 30000})
        .hover(modalOKButton)
        .click(modalOKButton);

    //open second modal
    await t
        .click('#LayerDeletingPopUpButtonID');

    //select OK button from second modal
    const secondModalOKButton = Selector(??);
});

我正在使用的 html 如下。我正在尝试 select 第二个确定按钮：

Answer 1

您尝试使用 nth 了吗？

const modalOKButton = Selector('div.ant-modal').nth(1)
        .find('div.ant-modal-footer')
        .find('button.ant-btn-primary');

或者尝试使用 aria-labelledby

选择器

const modalOKButton = Selector("[aria-labelledby='rcDialogTitle1']")
        .find('div.ant-modal-footer')
        .find('button.ant-btn-primary');

Select 在 testcafe 中打开的第 N 个模态的确定按钮

Select OK button from N'th modal opened in testcafe

html

javascript

automated-tests

e2e-testing

testcafe