TestCafe-单击链接后等待页面加载

时间:2018-08-29 13:11:38

标签: javascript e2e-testing testcafe

我正在使用testcafe进行我当前的电子商务项目的e2e测试。在产品列表页面上,我使用选择器来选择产品图块并单击。之后,该页面将加载产品详细信息页面,我可以继续进行测试。

问题是,尽管尚未加载产品详细信息页面的断言,但该页面已经继续。我假设click动作将等待元素出现并等待页面加载,然后再继续进行断言。

测试:

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;

是否还有另一种等待页面加载的方式,而不是仅使用睡眠方式?还是最好的解决方案是什么?

致谢, 山茱

1 个答案:

答案 0 :(得分:6)

您可以指定一个超时值,以便期望值将等待一段时间,直到您的页面位于该url上。取决于您需要多少时间,您可以将超时更改为更低或更高,否则它将使用默认超时,我不记得默认是什么?

有关Selector Options的更多信息

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