TestCafe - Wait for page load after click on link

Question

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

Newfangled

testcafe should be waiting for the element to appear, so that you shouldn't have to track page transitions: testcafe.io/documentation/402827/guides/concepts/… – Mazda

Answer 1

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});

Indiscreet

Some pages don't have changed url after click, it is typical for one page applications written in Javascript. In that case, this approach will not work. – Swank