时间戳

首页 > 解决方案 > Testcafe + React + Browserstack

reactjs - Testcafe + React + Browserstack

问题描述

我正在尝试testcafe-react-selectors在我的 TestCafé 测试中使用，以便更轻松地测试我的应用程序的反应部分。测试在本地运行良好，但是当我尝试在 CI 中运行它们时，反应部分不起作用。

示例 jsx：

export const Nametag = ({ url, title, subTitle, disabled, 
 showChooseAnother, chooseAnotherText, }) => (
   <div className={`MediaHotBar__element text--ellipsis ${disabled ? 
      'MediaHotBar__element--background' : ''}`}>
    <a className="text__link--no-underline" href={url} disabled={disabled} >
      {title}
    </a>
  <div className="text--detail text--gray-7">{ showChooseAnother ? 
    <ChooseAnother id={chooseAnotherText} /> : <span>{subTitle} 
    </span> }</div>
  </div>
);

示例测试：

测试片段：

test('Verifies a user can navigate to medias from an In Progress 
  test', async (t) => {

  const mediaName = 'AB Test Variant';

  await waitForReact();

  await t
    .click(abTestShowPage.getMediaLink(mediaName))
    .expect(mediaPage.title.textContent).contains(mediaName);
 });

页面对象：

import { Selector } from 'testcafe';
import { ReactSelector } from 'testcafe-react-selectors';

export default class ABTestShowPage {
  constructor() {
    this.mediaNametag = ReactSelector('Nametag');
  }

  getMediaLink(mediaName) {
    return this.mediaNametag.withText(mediaName).find('a');
  }
}

我很困惑可能出了什么问题。我能够在 Browserstack 中交互地运行东西，并且 dom 与它在本地的样子相同。最坏的情况是，我可以摆脱它，testcafe-react-selectors因为所有与 React 无关的东西都可以正常工作，但我真的很想弄清楚这一点，因为它使测试更加整洁。谢谢！

编辑：这是 TestCafé 的输出：

1) The specified selector does not match any element in the DOM tree.

   > | Selector([function])
     |   .withText('AB Test Variant')
     |   .find('a')

  Browser: Chrome 69.0.3497 / Mac OS X 10.13.6

     46 |
     47 |  await waitForReact();
     48 |
     49 |  await t
   > 50 |    .click(abTestShowPage.getMediaLink(mediaName))
     51 |    .expect(mediaPage.title.textContent).contains(mediaName);
     52 |});
     53 |

     at click
  (/usr/src/app/testcafe/tests/abTesting/abTestShow.js:50:6)

另一个失败的 React 测试用例如下所示：

1) AssertionError: expected null to deeply equal 'Draft'

  Browser: Chrome 69.0.3497 / Mac OS X 10.13.6

     71 |  await waitForReact();
     72 |  const testStatus = await
  abTestShowPage.statusBox.getReact(({ props }) => props.status);
     73 |
     74 |  await t
     75 |
  .expect(abTestShowPage.showPageTitleTxt.textContent).contains('Untitled
  A/B Test')
   > 76 |    .expect(testStatus).eql('Draft');
     77 |});
     78 |
     79 |test('Verify that a user can delete an A/B test', async (t)
  => {
     80 |  const deleteButton =
  abTestIndexPage.getDeleteButton('Delete This');
     81 |

     at eql
  (/usr/src/app/testcafe/tests/abTesting/abTestIndex.js:76:25)

标签： reactjsautomated-testse2e-testingbrowserstacktestcafe

解决方案

我们想出了解决这个问题的方法。我不知道这是否是最好的方法，但是添加displayName到反应组件中可以绕过缩小。我想不出办法让 webpack 和 uglify 为我们做这件事，因为我们在 webpack 1 上，但我现在已经畅通无阻了！

推荐阅读