javascript - 测试时弹出消息框

Question

我通过测试咖啡馆工作室运行了一个测试，该测试进入网站，单击页面并暂停。在暂停期间，我希望弹出一个消息框并显示评论(用作解释网站上发生的事情的教学工具)。我尝试了几种选择，但它们不起作用。我对此很陌生，可能会遗漏一些东西？

提前致谢! 这是我的简单测试代码

从 'testcafe' 导入 { Selector, ClientFunction }; 从“弹出窗口”导入{弹出窗口}； 固定装置svdemo管理器驾驶舱 .page http://localhost/SvManagerCockpit/home .httpAuth({ 用户名:'我的用户名在这里'， 密码:'我的密码在这里'， 域名:'mydomainhere' });

测试('暂停'，异步t => { 等待t .click(Selector('span').withText('机器 OEE 仪表板')) .等待(10000); 弹出警报({ 内容:“你好!” }); 返回1； });

await t
 .expect(alert()).eql(1);

}); 我希望在 .js 测试中插入一些代码，以在浏览器中生成消息框/对话框。

Answer 1

您的 popup.alert 是 ClientFunction 吗？如果是这样，应该使用 await 关键字调用它。 请看一下下面的示例，该示例展示了如何实现此类测试:

import { Selector, ClientFunction } from 'testcafe';

fixture `testcafe`
    .page `https://devexpress.github.io/testcafe/`;

test('Test with message box', async t => {
    const showMessageBox = ClientFunction(message => {
        return new Promise(resolve => {
            var msgBox = document.createElement('div');
            msgBox.textContent = message;
            msgBox.style['top'] = '500px';
            msgBox.style['left'] = '500px';
            msgBox.style['position'] = 'absolute';
            msgBox.style['font-size'] = 'x-large';
            document.body.appendChild(msgBox);
            setTimeout(() => {
                document.body.removeChild(msgBox);
                resolve();
            }, 4000);            
        });
    });

    await t
        .click(Selector('span').withText('Docs'));
    await showMessageBox('Docs link was clicked!');
    await t
        .click(Selector('a').withText('Using TestCafe'));
});