Testcafe + React + Browserstack

Question

我正在尝试在我的 TestCafé 测试中使用 testcafe-react-selectors 来更轻松地测试我的应用程序的反应部分。测试运行在本地很好，但是当我尝试运行它们在 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)

Answer 1

我们找到了解决这个问题的方法。我不知道这是否是最好的方法，但是将 displayName 添加到反应组件可以绕过缩小。由于我们使用的是 webpack 1，我无法找到一种方法来获取 webpack 和 uglify 来为我们执行此操作，但我现在已畅通无阻！

Testcafe + React + Browserstack

Testcafe + React + Browserstack

automated-tests

browserstack

reactjs

e2e-testing

testcafe