How to use testcafe-react-selectors - 10 common examples

Array.from(Array(24).keys()).forEach(async index => {
      this.seedWordInputs.push(new SeedWordAtIndex(index).input)
    })
  }

  // Controls
  backButton = ReactSelector('BackButton')
  nextButton = ReactSelector('NextButton')

  // Steps
  connectionType = ReactSelector('ConnectionType')
  connectionDetails = ReactSelector('ConnectionDetails')
  connectionConfirm = ReactSelector('ConnectionConfirm')
  seedView = ReactSelector('SeedView')
  seedConfirm = ReactSelector('SeedConfirm')
  password = ReactSelector('Password')
  autopilot = ReactSelector('Autopilot')
  network = ReactSelector('Network')

  // Connection type radio options.
  connectionTypes = {
    create: new ConnectionTypeOption('create'),
    import: new ConnectionTypeOption('import'),
    custom: new ConnectionTypeOption('custom'),
    btcpayserver: new ConnectionTypeOption('btcpayserver'),
  }

  connectionDetailsTabs = {
    string: new ConnectionDetailsTab('FORM_TYPE_CONNECTION_STRING'),
    manual: new ConnectionDetailsTab('FORM_TYPE_MANUAL'),
  }

test('Can create content node from inside InlineUI', async t => {
    const headlineTitle = 'Helloworld!';
    subSection('Create a headline node');
    await Page.waitForIframeLoading(t);
    await t
        .switchToIframe('[name="neos-content-main"]')
        .click(Selector('.neos-contentcollection'))
        .click(Selector('#neos-InlineToolbar-AddNode'))
        .switchToMainWindow()
        .click(Selector('button#into'))
        // TODO: this selector will only work with English translation.
        // Change to `withProps` when implemented: https://github.com/DevExpress/testcafe-react-selectors/issues/14
        .click(ReactSelector('NodeTypeItem').find('button>span>span').withText('Headline'));

    subSection('Type something inside of it');
    await Page.waitForIframeLoading(t);
    await t
        .switchToIframe('[name="neos-content-main"]')
        .typeText(Selector('.test-headline h1'), headlineTitle)
        .expect(Selector('.neos-contentcollection').withText(headlineTitle).exists).ok('Typed headline text exists');

    subSection('Inline validation');
    // We have to wait for ajax requests to be triggered, since they are debounced for 0.5s
    await t.wait(600);
    await changeRequestLogger.clear();
    await t
        .expect(Selector('.test-headline h1').exists).ok('Validation tooltip appeared')
        .click('.test-headline h1')
        .pressKey('ctrl+a delete')

test('Sidebar Header exists and user may set location', async t => {
  const sidebarComponent = await Selector('.issues__header');
  await t.expect(sidebarComponent.exists).ok();

  const Location = await ReactSelector('Location');
  await t.expect(Location).ok('Location component is not displayed');

  const setLocationMessage = await Selector('#setLocationMessage');
  await t
    .expect(setLocationMessage.exists)
    .ok('Set location message is not displayed');

  let locationSetMessage = await Selector('#locationMessage').withText(
    'Set your location'
  );

  if (await locationSetMessage.exists) {
    const locationButton = await Location.findReact('button');
    await t.expect(locationButton.innerText).eql('CHANGE LOCATION');
    await t.click(locationButton);

test(`basic render`, async t => {
  await t.expect(ReactSelector('Panel').count).eql(3);
});

seeedWordInput3 = ReactSelector('SeedConfirm Input')
    .nth(2)
    .find('input')
  passwordInput = ReactSelector('Password Input').find('input')
  nameInput = ReactSelector('Name Input').find('input')

  hostInput = ReactSelector('ConnectionDetailsManual Input')
    .nth(0)
    .find('input')
  certInput = ReactSelector('ConnectionDetailsManual Input')
    .nth(1)
    .find('input')
  macaroonInput = ReactSelector('ConnectionDetailsManual Input')
    .nth(2)
    .find('input')
  connectionStringInput = ReactSelector('ConnectionDetails TextArea')
    .withProps({ field: 'connectionString' })
    .find('textarea')
}

export default Onboarding

async () => {
    await waitForReact(15000);
  }
);

fixture`Footer`.page`http://localhost:3000`.beforeEach(async () => {
  await waitForReact(15000);
});

fixture`Sidebar`.page`http://localhost:3000`.beforeEach(async () => {
  await waitForReact(15000);
});

fixture`Header`.page`http://localhost:3000`.beforeEach(async () => {
  await waitForReact(15000);
});

export const fixtureBeforeEachHook = async () => {
  await waitForReact(180000);
};