Select 测试中模态的确定按钮

Question

我正在尝试使用 testcafe select 我页面上的一个元素，但我对 selectors 非常缺乏经验。我很高兴在 JSX 或 html 中 select 它，但无法找出任何一种方法。单击 "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);

Select 测试中模态的确定按钮

Select OK button from modal in testing

html

javascript

jsx

reactjs

testcafe