Question

到目前为止，我已为该项目总共编写了12个测试，并且根据测试组成，在不同的地方发生了一个错误。

我的问题是关于如何调试此问题。我将分享错误和测试样本，希望其他人遇到类似的问题，并对如何处理它有所了解。

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

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

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

所报告的测试工作是孤立的。排除此测试后，错误会显示在另一个测试中。

在本文末尾，您将能够看到跳过此测试时引发的错误。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

在current product version（0.23.0）中，我们引入了Stop Test Run After the First Test Fail选项。现在，您可以将TestCafe配置为在第一次测试失败后停止整个测试运行。当您一一解决测试问题时，这可以节省您的时间。

使用上述--debug-on-fail选项，您可以指定测试失败时是否自动进入调试模式。如果启用此选项，则TestCafe在失败时暂停测试。这样一来，您就可以查看经过测试的页面并确定失败的原因。

此外，您可以使用--debug-mode选项。在这种模式下，在执行第一个操作或声明之前暂停测试执行，使您可以调用开发人员工具并进行调试。

另请参阅：TestCafe Debugging

如何调试这个Testcafe案例？

1 个答案: