reactjs - Testcafe react 选择器

Question

我对 testcafe react 选择器的实际工作方式感到困惑。我对 JS 还很陌生，所以这可能更多是因为我不理解 await 在 JS 中的工作原理。

对于我来说， react 选择器何时尝试获取数据似乎有点不透明。我尝试写这样的东西:

页面对象:

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 命令或 await，但我只是不太明白我在做什么。我做错了。为什么第一种方法没有按照我期望的方式计算 React 选择器？当我调用 waitForReact 时，页面已完全加载，那么为什么普通的 ReactSelector 找不到组件呢？感觉我需要为我的页面对象添加额外的复杂性才能需要这样的函数，特别是在这种情况下，它几乎是单次使用的，因为我不会在这个特定的表中寻找其他行。

谢谢!

Answer 1

看起来您已经输入了 abTestShowPage.statsActionRow 代替 abTestShowPage.statsRow。查看堆栈跟踪:

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

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