Testcafe + React + Browserstack - PullRequest
Новая
       32

Testcafe + React + Browserstack

0 голосов
/ 16 октября 2018

Я пытаюсь использовать 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, и дом идентичен тому, как он выглядит локально.В худшем случае я могу избавиться от 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)

1 Ответ

0 голосов
/ 18 октября 2018

Мы нашли способ обойти это.Я не знаю, является ли это лучшим способом, но добавление displayName к компонентам реакции обходит минификацию.Я не мог придумать, как получить веб-пакет и сделать это для нас, так как мы находимся в веб-пакете 1, но теперь я разблокирован!

...