时间戳

首页 > 解决方案 > Testcafe 反应选择器

reactjs - Testcafe 反应选择器

问题描述

我对 testcafe 反应选择器的实际工作方式感到困惑。我对 JS 很陌生，所以这可能更多是因为我不了解awaitJS 一般是如何工作的。

对我来说，反应选择器何时尝试获取他们的数据似乎有点不透明。我试着写这样的东西：

页面对象：

export default class ABTestShowPage {
  constructor() {
    this.statsRow = ReactSelector('Row').withProps('name', 'Actions');
  }
}

测试：

test('Verifies the stats table has "No Actions Available" for completed test', async (t) => {
  const titleLink = abTestIndexPage.getABTestTitleLink('Completed One CTA');

  await t
    .click(titleLink)

  await waitForReact();

  const actionsRow = abTestShowPage.getStatsRow('Actions');

  await t
    .expect(abTestShowPage.statsRow.exists).ok();
});

每次我尝试运行测试时，都会出现以下测试失败：

A/B Test Show
✖ Verifies the stats table has "No Actions Available" for completed test

1) TypeError: Cannot read property 'exists' of undefined

  Browser: Chrome 69.0.3497 / Mac OS X 10.13.6

     369 |    .click(titleLink)
     370 |
     371 |  await waitForReact();
     372 |
     373 |  await t
   > 374 |    .expect(abTestShowPage.statsActionRow.exists).ok();
     375 |});
     376 |

我尝试await在不同的地方喷洒，但得到了相同的结果。

我可以通过测试的唯一方法是将结构完全更改为如下所示：

页面对象：

export default class ABTestShowPage {
  constructor() {
    this.statsRow = ReactSelector('Row');
  }

  getStatsRow(rowName) {
    return this.statsRow.withProps('name', rowName);
  }
}

测试：

test('Verifies the stats table has "No Actions Available" for completed test', async (t) => {
  const titleLink = abTestIndexPage.getABTestTitleLink('Completed One CTA');

  await t
    .click(titleLink)

  await waitForReact();

  const actionsRow = abTestShowPage.getStatsRow('Actions');

  await t
    .expect(actionsRow).ok();
});

我遇到过类似的问题，我需要（看似随机地）输入额外的waitForReact命令或awaits，但我真的不明白我做错了什么。为什么第一种方法没有按照我期望的方式计算 React 选择器？当我调用时页面已完全加载waitForReact，那么为什么平原ReactSelector找不到组件？感觉就像我需要向我的页面对象添加额外的复杂性以需要这样的功能，特别是在这种情况下，它几乎是一次性使用，因为我不会在这个特定的表中寻找其他行。

谢谢！

标签： reactjsautomated-testsselectore2e-testingtestcafe

解决方案

看起来您输入  abTestShowPage.statsActionRow  了而不是  abTestShowPage.statsRow. 查看堆栈跟踪：

     373 |  await t
   > 374 |    .expect(abTestShowPage.statsActionRow.exists).ok();
     375 |});
     376 |

    你的代码很好。如果您遇到与第一个变体中的代码完全相同的其他错误，请更新您的帖子并包含它们。

推荐阅读