reactjs - Testcafe + React + Browserstack

我正在尝试在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，因为所有与反应无关的东西都可以正常工作，但是我真的很想弄清楚这一点，因为它使测试变得更加整洁。谢谢！

编辑：这是为此的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)

最佳答案

我们找到了解决此问题的方法。我不知道这是否是最好的方法，但是将displayName添加到react组件可以解决这些问题。由于我们使用的是webpack 1，因此我想不出一种方法来获取webpack并丑化为我们做这件事，但是我现在不受阻碍了！

关于reactjs - Testcafe + React + Browserstack，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52840141/