TestCafe firefox fails when page load takes too long

Question

I'm pretty new to UI testing and just started exploring testCafe

I'm writing a simple test in testCafe that will go to google, search testCafe, click on the submit button , then click on the first search result that appears and verify if it is the testCafe page:

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/")

})

This test works perfectly with Chrome and Safari, however Firefox is taking too long to load the google home page, and it is somehow not able to find the input[type="submit"] button. Thus the test fails. It seems to me that the test starts executing even before the pageLoad finishes.

Here is the error that comes in 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)

Is there a better way to write this test?

Answer 1

See code below:

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/")

});

It is good practice to create variables for your selectors, that makes it easy to read. Also instead of clicking on the submit button, All did was hit the enter key. You can read up more here

You can also pass in a command line argument to slow down the test a little bit. You can read up more here as well