对 Azure DevOps Pipeline 上的 TestCafe 端到端测试失败进行故障排除

Question

我在 Azure DevOps 管道上运行 TestCafe 端到端测试时遇到问题。在本地，测试运行顺利，没有任何失败，但在管道上，它们偶尔会失败，并显示错误，表明在 DOM 中找不到选择器或 .exists 断言失败，即使我可以确认元素存在于 DOM 中。

我已经确保选择器已正确定义，并且在测试执行期间元素存在于 DOM 中。尽管如此，失败似乎是间歇性的并且有些随机。

我怀疑我的本地设置和 Azure DevOps 管道环境之间可能存在一些环境差异，可能导致这些问题并导致超时。然而，我不确定如何有效地识别和解决这些差异。我还打开了配置文件中的屏幕截图，无法尝试理解正在发生的情况，但它将它们保存到服务器中我认为无法访问的某个位置。

有人可以提供一些故障排除技巧来解决在 Azure DevOps 管道上运行的 TestCafe 测试的此类问题吗？此外，我是否应该考虑调整任何特定的配置或设置以确保管道上的测试执行更可靠？

任何见解或建议将不胜感激。谢谢！

我的.testcaferc.js：

module.exports = 
{
        browsers: ["chrome"],
        assertionTimeout: 50000,
        pageLoadTimeout: 50000,
        selectorTimeout: 50000,
        pageRequestTimeout: 50000,
        browserInitTimeout: 180000,
        screenshots: {
            takeOnFails: true
        },
        quarantineMode: true,
        skipJsErrors: true,
        baseUrl: www.mywebsite.com 
}

失败截图：

Answer 1

您可以将本地计算机添加为 Azure DevOps 管道中的自托管代理，然后使用 testcafe 测试代码，因为将使用您的本地环境并且屏幕截图将保存在本地。请参阅1和2。现在，您正在使用 Microsoft 托管代理运行 DevOps 管道以访问 Microsoft 托管代理中的特定文件夹，请参阅此MS Document。 如果您的测试已在本地 Windows 计算机中创建并成功运行，您可以使用 windows-最新作为代理。因此 Azure DevOps 将使用基于 Windows 最新操作系统的自托管代理。

我的test.js：-

参考这里。

import { Selector } from 'testcafe';

fixture('TestCafe Example Page Test')
    .page('https://devexpress.github.io/testcafe/example/');

test('Test Page Title', async t => {
    await t.expect(Selector('title').innerText).eql('TestCafe Example Page');
});

test('Test Text Typing and Submit', async t => {
    await t.typeText('#developer-name', 'John Doe')
           .click('#submit-button');
    
    const articleHeader = Selector('#article-header').innerText;
    await t.expect(articleHeader).contains('John Doe');
});

输出：-