Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TestCafe - Wait for page load after click on link

I'm using testcafe for e2e testing my current e-commerce project. On the product listing page, I use a Selector to select a product tile and perform a click. After this, the page loads the product detail page and I can continue with testing.

The issue is though that It already continues with the asserts of the product detail page while the page is not loaded yet. I assumed that the click action will wait for the element to appear and wait for the page to load before continuing to the asserts.

test:

import HomePage from '../pages/HomePage/HomePage';
import ProductListerPage from '../pages/ProductListerPage/ProductListerPage';
import Browser from '../helpers/Browser';

fixture('test case').page('http://www.homepage.com');

test('test 1', async t => {
  const homePage = new HomePage();
  await homePage.header.search(t, 'foo bar');

  await t.expect(Browser.getCurrentLocation()).eql('http://www.product-lister/search?q=3301');
  const productListerPage = new ProductListerPage();
  await productListerPage.goToFirstProduct(); // <<< in here I click on the first product

  await t.expect(Browser.getCurrentLocation()).eql('http://www.product-detail/'); // << already executed on lister page instead of product page
});

ProductListerPage:

import AbstractPage from '../AbstractPage';
import {t, Selector} from "testcafe";

class ProductListerPage extends AbstractPage {

  constructor() {
    super();

    this._productTilesContainer = Selector('.productLister-productTeasersInner');
    this._productTiles = this._productTilesContainer.child('a.productListerTeaser');
  }

  async goToFirstProduct() {
    return await t.click(this._productTiles.nth(0));
  }
}

export default ProductListerPage;

Is there another way of waiting for page load instead of using just a sleep? Or what is the best solution?

regards, Cornel

like image 996
Cornel Janssen Avatar asked Aug 29 '18 13:08

Cornel Janssen


People also ask

How do you wait for an element to load in TestCafe?

Wait Mechanism for SelectorsWhen TestCafe executes a Selector query, it waits for the target element to appear in the DOM. The query fails if it cannot find the target within the Selector timeout. The target element doesn't have to be visible for the Selector to succeed.

What is assertion in TestCafe?

Use Assertions to verify page action results. Assertions are comparisons that help you determine if the page state is correct. Assertions compare the actual value of a page-related variable to the value you expect it to have. If an assertion fails, the test fails too.

What is fixture in TestCafe?

fixture Function A fixture is a group of tests with the same starting URL. Every test belongs to a fixture. The Fixture object offers methods that configure the following: The test page URL. Custom fixture metadata.

How do I run TestCafe?

The easiest way to run TestCafe tests is to use the command line interface. Specify the target browser and test file path. TestCafe opens the selected browser and starts test execution.


1 Answers

You can specify a timeout value so the expect will wait a certain amount of time till your page is on that url. Depending how much time you need you can change the timeout to be lower or higher, otherwise it uses the default timeout, I can't remember what the default is?

more info on Selector Options

await t.expect(Browser.getCurrentLocation()).eql('http://www.product-detail/', {timeout: 5000});

like image 73
BarretV Avatar answered Oct 15 '22 23:10

BarretV