页面加载时间过长时，TestCafe firefox 失败答案

【问题标题】：TestCafe firefox fails when page load takes too long页面加载时间过长时，TestCafe firefox 失败
【发布时间】：2020-05-25 13:17:54
【问题描述】：

我对 UI 测试还很陌生，刚刚开始探索 testCafe

我正在testCafe中写一个简单的测试，会去google，搜索testCafe，点击提交按钮，然后点击出现的第一个搜索结果，验证是否是testCafe页面：

import {Selector} from 'testcafe';
import {ClientFunction} from 'testcafe';

const getURL = ClientFunction(()=> window.location.href);

fixture `Getting Started`
    .page `https://www.google.com/`;

test('Google Search test', async t =>{
    await t
    .typeText('input[name="q"]','testcafe')
    .click('input[type="submit"]')
    .click('div.r > a')
    .expect(getURL()).eql("https://devexpress.github.io/testcafe/documentation/getting-started/")

})

此测试在 Chrome 和 Safari 上完美运行，但是 Firefox 加载 google 主页的时间过长，并且不知何故无法找到 input[type="submit"] 按钮。因此测试失败。在我看来，测试甚至在 pageLoad 完成之前就开始执行。

这是 Firefox 中出现的错误：

   1) The element that matches the specified selector is not visible.

      Browser: Firefox 75.0 / macOS 10.14

          7 |    .page `https://www.google.com/`;
          8 |
          9 |test('Google Search test', async t =>{
         10 |    await t
         11 |    .typeText('input[name="q"]','testcafe')
       > 12 |    .click('input[type="submit"]')
         13 |    .click('div.r > a')
         14 |    .expect(getURL()).eql("https://devexpress.github.io/testcafe/documentation/getting-started/")
         15 |
         16 |})

         at <anonymous> (/Users/goplap/TestCafeTest/tests/sampleTest.js:12:6)
         at <anonymous> (/Users/goplap/TestCafeTest/tests/sampleTest.js:9:1)
         at <anonymous> (/Users/goplap/TestCafeTest/node_modules/testcafe/src/api/wrap-test-function.js:17:28)
         at TestRun._executeTestFn (/Users/goplap/TestCafeTest/node_modules/testcafe/src/test-run/index.js:295:19)
         at TestRun.start (/Users/goplap/TestCafeTest/node_modules/testcafe/src/test-run/index.js:345:24)



 1/1 failed (18s)

有没有更好的方法来编写这个测试？

【问题讨论】：

标签： javascript testing automated-tests testcafe ui-testing

【解决方案1】：

见下面的代码：

import {Selector} from 'testcafe';
import {ClientFunction} from 'testcafe';

const getURL = ClientFunction(()=> window.location.href);

 fixture `Getting Started`
   .page `https://www.google.com/`;

test('Google Search test', async t =>{

const inputBox = Selector('input[name="q"]');
const anchorLinks = Selector(".l");
const gettingStartedText = "Getting Started";

await t
.typeText(inputBox,'testcafe')
.pressKey('enter')
.click(anchorLinks.withText(gettingStartedText))
.expect(getURL()).eql("https://devexpress.github.io/testcafe/documentation/getting-started/")

});

为您的选择器创建变量是一种很好的做法，这样便于阅读。也不是单击提交按钮，而是按回车键。你可以阅读更多here

您还可以传入命令行参数以稍微减慢测试速度。你可以阅读更多here as well

【讨论】：