How to use testcafe - 10 common examples

import { Selector } from 'testcafe';

export default Selector(complexSelector => {
    function validateSelector (selector) {
        if (selector !== void 0 && typeof selector !== 'string')
            throw new Error('If the selector parameter is passed it should be a string, but it was ' + eval('typeof selector')); // eslint-disable-line no-eval
    }

    function validateVueVersion (rootInstance) {
        const MAJOR_SUPPORTED_VUE_VERSION = 2;
        const vueVersion                  = parseInt(findVueConstructor(rootInstance).version.split('.')[0], 10);

        if (vueVersion < MAJOR_SUPPORTED_VUE_VERSION)
            throw new Error('testcafe-vue-selectors supports Vue version 2.x and newer');
    }

    /*eslint-disable no-unused-vars, no-eval*/
    function findVueConstructor (rootInstance) {
        // NOTE: Testcafe does not support a ClientFunction containing polyfilled functions. See list in

import { ClientFunction } from 'testcafe';

fixture `gh-1057 - fixed by hidden parent`
    .page `http://localhost:3000/fixtures/regression/gh-1057/pages/hiddenByFixedParent.html`;

const targetsClicked = ClientFunction(() => window.target1Clicked && window.target2Clicked);

test('gh-1057', async t => {
    // NOTE: scrolling has issues in iOS Simulator https://github.com/DevExpress/testcafe/issues/1237
    await t
        .click('#target2')
        .click('#target1')
        .expect(targetsClicked()).ok();
});

test('gh-1057 with custom offsets', async t => {
    // NOTE: scrolling has issues in iOS Simulator https://github.com/DevExpress/testcafe/issues/1237
    await t
        .click('#target2', { offsetX: -1, offsetY: -1 })
        .click('#target1', { offsetX: 1, offsetY: 1 })
        .expect(targetsClicked()).ok();
});

function showSuccess(stepName: string, stepLabel: StepLabel): void {
  if (!t.ctx.stepRunnerContext) {
    t.ctx.stepRunnerContext = {};

    // eslint-disable-next-line no-console
    console.log('');
  }

  // eslint-disable-next-line no-console
  console.log(`  ${chalk.green(symbols.ok)} ${stepLabel} ${stepName}`);
}

t.ctx.canExecute = true;
      return;
    }
    if (targets.length === 0) {
      return;
    }
    t.ctx.canExecute = false;
    for (const target of targets) {
      if (config.env.name === target) {
        t.ctx.canExecute = true;
      }
      if (target === 'any') {
        t.ctx.canExecute = true;
      }
    }
    if (t.ctx.canExecute === false) {
      const message = `next steps will not run because scenario is targeted only for ${targets}`;

      // eslint-disable-next-line no-console
      console.log(`    ${chalk.inverse(message)}`);
    }
  },
};

only: async (...targets: TargetEnvironnement[]): Promise => {
    const config: Config = getCurrentConfig(t);
    if (config.env === undefined) {
      throw new Error('The env property in the configuration file is not defined.');
    }
    if (config.env.name === 'any') {
      // filters are bypassed if the environment in the configuration file is any
      t.ctx.canExecute = true;
      return;
    }
    if (targets.length === 0) {
      return;
    }
    t.ctx.canExecute = false;
    for (const target of targets) {
      if (config.env.name === target) {
        t.ctx.canExecute = true;
      }
      if (target === 'any') {
        t.ctx.canExecute = true;
      }
    }
    if (t.ctx.canExecute === false) {
      const message = `next steps will not run because scenario is targeted only for ${targets}`;

      // eslint-disable-next-line no-console
      console.log(`    ${chalk.inverse(message)}`);
    }
  },
};

const config: Config = getCurrentConfig(t);
    if (config.env === undefined) {
      throw new Error('The env property in the configuration file is not defined.');
    }
    if (config.env.name === 'any') {
      // filters are bypassed if the environment in the configuration file is any
      t.ctx.canExecute = true;
      return;
    }
    if (targets.length === 0) {
      return;
    }
    t.ctx.canExecute = false;
    for (const target of targets) {
      if (config.env.name === target) {
        t.ctx.canExecute = true;
      }
      if (target === 'any') {
        t.ctx.canExecute = true;
      }
    }
    if (t.ctx.canExecute === false) {
      const message = `next steps will not run because scenario is targeted only for ${targets}`;

      // eslint-disable-next-line no-console
      console.log(`    ${chalk.inverse(message)}`);
    }
  },
};

function showSuccess(stepName: string, stepLabel: StepLabel): void {
  if (!t.ctx.stepRunnerContext) {
    t.ctx.stepRunnerContext = {};

    // eslint-disable-next-line no-console
    console.log('');
  }

  // eslint-disable-next-line no-console
  console.log(`  ${chalk.green(symbols.ok)} ${stepLabel} ${stepName}`);
}

/// 
import { Role, Selector, t } from 'testcafe';

const userName = Selector('#user-name');

const someUser = Role('http://localhost:3000/fixtures/api/es-next/roles/pages/login-page.html', async() => {
    await t
        .typeText('input[name="name"]', 'SomeUser')
        .click('input[value="LogIn"]');
}, { preserveUrl: false });

fixture `AnonymousRole`
    .page `http://localhost:3000/fixtures/api/es-next/roles/pages/index.html`;

test('Test1', async() => {
    await t
        .useRole(someUser)
        .expect(userName.textContent).eql('SomeUser')
        .useRole(Role.anonymous())
        .expect(userName.textContent).eql('');
});

import { Role, Selector, t } from 'testcafe';

// $ExpectError - string as Selector
Selector(123)
const userName = Selector('#user-name');

const someUser = Role('http://localhost:3000/fixtures/api/es-next/roles/pages/login-page.html', async() => {
    await t
        .typeText('input[name="name"]', 'SomeUser')
        .click('input[value="LogIn"]');
});

fixture `AnonymousRole`
    .page `http://localhost:3000/fixtures/api/es-next/roles/pages/index.html`;

test('Test1', async() => {
  await t
        .useRole(someUser)
        .expect(userName.textContent).eql('SomeUser')
        .useRole(Role.anonymous())
        .expect(userName.textContent).eql('');
})

'Access-Control-Allow-Origin' : '*'
                });
                var readStream = fs.createReadStream('./tests/index.html');
                // We replaced all the event handlers with a simple call to readStream.pipe()
                readStream.pipe(response);
            }).listen(port);
            resolve();
        });
    },
    sleep (timing=100, param) {
        return new Promise((resolve) => {
            setTimeout(_ => resolve(param), timing);
        });
    },

    waitTestsToFinish: ClientFunction(() => {
        return new Promise((resolve, reject)=>{
            fullTestsList.then(result=>{
                resolve(result);
            });
        });
    })
};


export default helpers;