在测试中从模式中选择确定按钮

Question

我正在尝试使用testcafe选择页面上的元素，但是我对选择器没有经验。我很高兴在JSX或html中选择它，但找不到任何一种方法。单击“ LayerAddingPopUpButton”后，将在页面上呈现模态，因此我尝试单击底部显示的“确定”按钮。当前测试失败，因为它不相信模式OK按钮的出现。

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

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

test('test layer adding pop up', async t => {
    await t
        .click('#LayerAddingPopUpButtonID');

    const modalOKButton = ReactSelector('ant-btn');
    await t.click(modalOKButton);
});

渲染页面的JSX树：

呈现页面的html：

Answer 1

替换此代码：

const modalOKButton = ReactSelector('ant-btn');
await t.click(modalOKButton);

由此：

const modalOKButton = Selector('div.ant-modal')
  .find('div.ant-modal-footer')
  .find('button.ant-btn-primary');
await t
  .expect(modalOKButton.with({visibilityCheck: true}).exists)
  .ok({timeout: 30000})
  .hover(modalOKButton)
  .click(modalOKButton);