如何调试这个 Testcafe 案例？答案

【问题标题】：How to debug this Testcafe case?如何调试这个 Testcafe 案例？
【发布时间】：2018-03-02 16:21:55
【问题描述】：

到目前为止，我已经为这个项目总共编写了 12 个测试，根据测试的组成，在不同的地方会出现一个错误。

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

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

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

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

所报告的相关测试是单独运行的。排除这个测试，错误会在另一个测试中出现。

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

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.

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

【问题讨论】：

嗨。这个错误意味着你的页面出现了一个js错误。有时它与页面上的某些问题有关。有时这是一个 TestCafe 问题（当 TestCafe 以不正确的方式代理页面时）。最好的调试方法如下： 1) 测试开始后，在浏览器中打开开发者工具； 2) 检查是否启用了“暂停异常”选项； 3）当错误发生时，您可以在浏览器的控制台中看到它的调用堆栈。有了这个，您可以查看它是否是您的页面或 TestCafe 代码中的问题。您可以使用 -e, --skip-js-errors 选项跳过页面上的 js-errors。
您也可以尝试最新的TestCafe dev 版本（致电npm install testcafe@dev）。有了它，您可以使用--debug-on-fail 选项运行测试。一旦测试失败，测试运行将暂停并切换到debug mode。
嗨，Alexander，非常感谢这些建议。一旦我能够复制问题，我会尽快检查它们。今天，无论如何，一切都很顺利。顺便说一句，我真的很喜欢 Testcafe，它很容易使用，而且默认的记者很棒。我只需要在调试这些最终情况下挂起。 :)
很高兴听到这个消息，谢谢！

标签： javascript reactjs debugging ecmascript-6 testcafe

【解决方案1】：

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

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

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

另见：TestCafe Debugging

【讨论】：