Выберите кнопку ОК из модального в тестировании

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