如何调试这个 Testcafe 案例？

Question

到目前为止，我已经为这个项目总共编写了 12 个测试，并且有一个错误发生在不同的地方，具体取决于测试的组成。

我的问题是关于如何调试这个问题。我将分享错误和测试样本，希望其他人也有类似的问题并且对如何解决它有想法。

Uncaught TypeError: Cannot read property 'type' of undefined 是有问题的错误，没有提及它发生的位置。

从测试的角度来看，下一步应该是单击按钮并弹出用于创建新产品的窗口。

应用程序运行正常，没有问题，只是 e2e 测试报告了问题。

所报告的相关测试是独立运行的。除本次测试外，错误出现在另一次测试中。

在此 post 结束时，您将能够看到跳过此测试时抛出的错误。

fixture('Select a product from the list:')
  .page('http://localhost:3000/products');

// @TODO Fix e2e test
test
  .before(generateProducts(page, 1))
  ('clicking the "Close detail" button should return us to the products page.', async t => {
    const productsListItem = await page.listContainer.child(0);
    await t
      .click(productsListItem)
      .click(page.closeDetail)
      .expect(page.productsPageTitle.innerText).eql('PRODUCTS')
  })
  .after(removeGeneratedProducts(detailedProductPage, 1));

test
  .before(generateProducts(page, 2))
  ('selecting another product, while the previous is still opened, should refresh the preview with the new selection.', async(t) => {
    const productListItems = await page.listContainer.find('li');

    const productsListItem0 = await productListItems.nth(0);
    const productsListItem0Title = await productsListItem0.find('[data-test-id="name"]').innerText;

    const productsListItem1 = await productListItems.nth(1);
    const productsListItem1Title = await productsListItem1.find('[data-test-id="name"]').innerText;

    await t
      .click(productsListItem0)
      .expect(page.productTitle.textContent).eql(productsListItem0Title || 'Missing product\'s name')
      .click(productsListItem1)
      .expect(page.productTitle.textContent).eql(productsListItem1Title || 'Missing product\'s name')
  })
  .after(removeGeneratedProducts(detailedProductPage, 2));


fixture('Field state updating when switching between products with an open Quick Edit view')
  .page('http://localhost:3000/products');

test
  .before(async t => {
    await t
      .click(page.showAddProductFormButton)
      .typeText(page.nameField, `${chance.name()} ${Math.floor(Math.random() * 100000) + 1}`)
      .click(page.createNewProductButton)

      .click(page.showAddProductFormButton)
      .click(page.createNewProductButton);
  })
  ('Products quick edit navigation should update the view, and not inherit the values of the previous product', async(t) => {
    const productListItems = await page.listContainer.find('li');
    const productsListItem0 = await productListItems.nth(0);
    const productsListItem1 = await productListItems.nth(1);

    await t
      .click(productsListItem0)
      .expect(page.productTitle.textContent).eql('Missing product\'s name')
      .click(productsListItem1)
      .click(productsListItem0)
      .click(productsListItem1)
      .click(productsListItem0)
      .expect(page.productTitle.textContent).eql('Missing product\'s name')
      .click(productsListItem0)
  })
  .after(removeGeneratedProducts(detailedProductPage, 2));

Don't expect results when running the code. I've used this feature to nicely import the code, nothing more.

跳过原始测试后，在不同的测试中出现相同的错误。

Answer 1

在current product version (0.23.0), we've introduced the Stop Test Run After the First Test Fail选项中。您现在可以将 TestCafe 配置为在第一次测试失败后停止整个测试运行。这可以节省您逐一解决测试问题的时间。

使用提到的 --debug-on-fail 选项，您可以指定是否在测试失败时自动进入调试模式。如果启用此选项，TestCafe 会在测试失败时暂停测试。这允许您查看测试页面并确定失败的原因。

此外，您可以使用 --debug-mode 选项。在此模式下，测试执行在第一个操作或断言之前暂停，允许您调用开发人员工具和调试。

另请参阅：TestCafe Debugging

如何调试这个 Testcafe 案例？

How to debug this Testcafe case?

javascript

reactjs

debugging

ecmascript-6

testcafe