javascript - TestCafe - 在 useRole 完全完成之前执行的测试

Question

TestCafe 1.8.0, Firefox 76.0(任何都可以)， macOS 10.15.4。

我的 TestCafe 测试(useRole 之后的步骤)试图在 useRole 完全完成之前执行。示例:

import { Role } from 'testcafe';

const role = Role('http://example.com/login', async t => {
    await t
        .typeText('#login', 'username')
        .typeText('#password', 'password')
        .click('#sign-in'); // Redirects to http://example.com/session
});

fixture `My Fixture`;

test('My test', async t => {
    await t
        .navigateTo('http://example.com/')
        .useRole(role);
        .click()
        .typeText('#search', 'query')
        // Further tests.
        ....... 

1. 正在使用 Angular 色 -> 用户被重定向到:末尾的 http://example.com/session。
2. Angular 色执行完成后 -> TestCafe 返回到我的测试 并重新加载 http://example.com/。

这是一个巨大的问题，因为在这一页重新加载之间只有片刻“页面已准备就绪”，并且由于 TestCafe 正在快速运行 .click() 被执行。现在页面重新加载，因此测试执行停止。一旦页面加载测试刹车，因为它试图在没有 .click() 的情况下 .typeText(...)。

试过这个解决方案:

1. 等到只有第一次才有效。第二次使用 useRole(来自缓存)时，代码甚至会在第二次页面重新加载之前执行。 .expect(getUrl()).eql('desiredurl', { timeout: 10000 })
2. 众所周知，硬等待 .wait(3000) 或减慢测试速度 .setTestSpeed(0.7) 会起作用，但从代码的 Angular 来看，这不是一个好的解决方案。测试仍然可能时不时地失败，我需要并希望这里保持稳定。
3. 使用 { preserveUrl: true } 它只会重新加载 http://example.com/session 因此是否使用此选项无关紧要。重新加载仍在进行中。

有什么想法吗？ 我如何让我的测试知道等待完全相同的页面重新加载而不使用任何硬编码等待、代码 sleep ？

Answer 1

据我了解，主要问题是 click 操作出于某种原因在错误的页面上执行。它不会等到页面完全重新加载。此行为是意外的。如果您创建可重现的示例，我们将不胜感激。

我同意使用 wait 或 setTestSpeed 不是合适的解决方案。

我看到您尝试使用断言:.expect(getUrl()).eql('desiredurl', { timeout: 10000 })。我认为这种方法应该有效，但我无法确定，因为我无法重现该问题。

您可以使用 preserveUrl: true 定义您的 Angular 色。然后，提取useRole方法如下:

async function useRole (t, role) {
    await t.useRole(role);

    await t.expect(getUrl()).eql('http://example.com/session', {timeout: 10000 });
}

现在，您可以使用新的 useRole(t, role) 方法，该方法将等待页面完全加载。