jquery - 如何在 TestCafe 中单击 jQuery 对话框按钮

Question

我正在使用 TestCafe 创建自动化测试，需要使用“确定”按钮关闭 jQuery 对话框。

由 jQuery 对话框生成的 HTML(包含“确定”按钮):

<div tabindex="-1" role="dialog" class="ui-dialog ui-corner-all ui-widget ui-widget-content ui-front ui-dialog-buttons information-dialog" aria-describedby="alert-dialog" aria-labelledby="ui-id-2" style="height: auto; width: 300px; top: 325.046px; left: 645.5px;">
<div class="ui-dialog-titlebar ui-corner-all ui-widget-header ui-helper-clearfix">
<span id="ui-id-2" class="ui-dialog-title">Information</span>
<button type="button" class="ui-dialog-titlebar-close" style="display: none;"></button>
</div>
<div id="alert-dialog" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 30.062px; max-height: none; height: auto;">Record created. Visit ID is 10008444</div>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<div class="ui-dialog-buttonset"><button type="button" class="ui-button ui-corner-all ui-widget">OK</button></div>
</div>
</div>

TestCafe 脚本:

import { Selector } from 'testcafe';

 fixture `My Test`
.page ('http://localhost/');

test('LOBO PS test', async t => {
    await t
        .click('#btnPRSave')
        .click(Selector("button").withText("OK"));
});

上面的脚本将“找到”“.click(Selector...”行处的按钮，但光标悬停在它上面而不单击。我错过了一个步骤吗？

更新:

我创建了一个fiddle进一步测试这个......并且它在那里工作得很好。 TestCafe 脚本是:

import { Selector } from 'testcafe';

 fixture `My Test`
.page ('https://jsfiddle.net/gcass/63fbm8ns/8/');

test('LOBO PS test', async t => {
    await t
    .switchToIframe('[name="result"]')
    .click(Selector("button").withText("OK"))
});

jsfiddle 和现实世界版本之间的差异是:

1. fiddle 使用 iFrame - 可能不相关；
2. 现实世界的对话框出现在 Bootstrap Modal 上......我怀疑这可能是相关的。

Answer 1

原来是IE的问题。我在 Edge 和 Chrome 中运行了相同的测试，它单击 jQuery 对话框按钮没有问题。