如何告诉 TestCafe 在 navigateTo 方法之后等待？答案

【问题标题】：How to tell TestCafe to wait after navigateTo method?如何告诉 TestCafe 在 navigateTo 方法之后等待？
【发布时间】：2017-12-06 12:18:04
【问题描述】：

我在 TestCafe 中有以下测试：

import { Selector } from 'testcafe';

const TEST_URL = process.env.TEST_URL;

fixture('/').page(`${TEST_URL}/`);

test(`users should be able to view the '/' page`, async (t) => {
    await t
        .navigateTo(TEST_URL)
        .expect(Selector('H1').withText('All Users').exists).ok()
});

这个测试失败了：

/
 ✖ users should be able to view the '/' page

   1) AssertionError: expected false to be truthy

      Browser: Chrome 59.0.3071 / Mac OS X 10.12.5

          5 |fixture('/').page(`${TEST_URL}/`);
          6 |
          7 |test(`users should be able to view the '/' page`, async (t) => {
          8 |    await t
          9 |        .navigateTo(TEST_URL)
       > 10 |        .expect(Selector('H1').withText('All Users').exists).ok()
         11 |});
         12 |

问题是页面没有完全加载并且没有 h1 标签（它是从 React 组件呈现的）但我不知道如何告诉 TestCafe 等待页面加载。

我试过了：

import { Selector } from 'testcafe';

const TEST_URL = process.env.TEST_URL;

fixture('/').page(`${TEST_URL}/`);

test(`users should be able to view the '/' page`, async (t) => {
    await t.expect(Selector('H1').withText('All Users').exists).ok()
});

这可行，但我需要进行一些测试才能使用 navigateTo，所以我想知道要更改哪些内容，以便使用 navigateTo 的测试版本也可以使用。

我尝试像这样为每一行设置等待：

import { Selector } from 'testcafe';

const TEST_URL = process.env.TEST_URL;

fixture('/').page(`${TEST_URL}/`);

test(`users should be able to view the '/' page`, async (t) => {
    await t.navigateTo(TEST_URL)
    await t.expect(Selector('H1').withText('All Users').exists).ok()
});

但是那个错误是一样的。

【问题讨论】：

卢卡·洛普西娜。我无法在一个简单的示例中重现您的场景。能否提供您网页的网址？

标签： node.js reactjs testing e2e-testing testcafe

【解决方案1】：

问题出在TEST_URL 变量中。如果它包含裸 IP 地址（例如，'xxx.xx.x.xxx'），navigateTo 会将浏览器重定向到 'http://xxx.xx.x.xxx/xxx.xx.x.xxx'，因为 navigateTo 操作将此字符串视为相对路径。

要解决此问题，请将协议包含在 TEST_URL 字符串中，例如'http://xxx.xx.x.xxx'.

【讨论】：