describe('my todo list', function() {
  it('should add a todo', function() {
    browser.get('https://my-todo-list.org');

    element(by.model('todoList.todoText'))
      .sendKeys('write first protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText())
      .toEqual('write first protractor test');

    todoList.get(2).element(by.css('input')).click();
    var completedAmount = element.all(by.css('.done-true'));
    expect(completedAmount.count()).toEqual(2);
  });
});

'use strict';

var AngularPage = function () {
  browser.get('http://my-todo-list.org');
};

 AngularPage.prototype = Object.create({}, {
    todoText: { get: function () { return element(by.model('todoText')); }},
    addButton: { get: function () { return element(by.css('[value="add"]')); }},
    yourName: { get: function () { return element(by.model('yourName')); }},
    greeting: { get: function () { return element(by.binding('yourName')).getText(); }},
    todoList: { get: function () { return element.all(by.repeater('todo in todos')); }},
    typeName: { value: function (keys) { return this.yourName.sendKeys(keys); }},
    todoAt: { value: function (idx) { return this.todoList.get(idx).getText(); }},
    addTodo: { value: function (todo) {
    this.todoText.sendKeys(todo);
    this.addButton.click();
  }}
});

module.exports = AngularPage;

import { Selector } from 'testcafe';

fixture `Hello world classique`
    .page `https://devexpress.github.io/testcafe/example`;


test('Saluer le développeur', async t => {
    await t
        .typeText('#developer-name', 'Laurent Wroblewski')
        .click('#submit-button')
        .expect(Selector('#article-header').innerText)
          .eql('Hello Laurent Wroblewski!');
});

import { Selector } from 'testcafe';

fixture `Example page`
    .page `http://devexpress.github.io/testcafe/example/`;

test('My test', async t => {
    const osCount            = Selector('.column.col-2 label').count;
    const submitButtonExists = Selector('#submit-button').exists;

    const secondCheckBox = Selector('input')
        .withAttribute('type', 'checkbox')
        .nth(1);

    await t
        .expect(osCount).eql(3)
        .click(secondCheckBox)
        .expect(submitButtonExists).ok();
});

import { Selector } from 'testcafe';

const elementWithIdOrClassName = Selector(value => {
    return document.getElementById(value) || document.getElementsByClassName(value);
});

interface UserTableSelector extends Selector {
    getCellContent(rowIndex: number, columnIndex: number): Promise<string>;
}

const userTable: UserTableSelector = <UserTableSelector>Selector('#users')
    .addCustomMethods({
        getCellText: (table: HTMLTableElement, rowIndex: number, columnIndex: number) => {
            return table.rows[rowIndex].cells[columnIndex].innerText;
        }
    }
);

await t.expect(userTable.getNameCellContent(1)).contains('Dupond');

import { AngularSelector } from 'testcafe-angular-selectors';

const list        = AngularSelector('list');
const listAngular = await list.getAngular();

await t.expect(listAngular.inputState).eql(1);

npm install testcafe-browser-provider-browserstack

npm install testcafe-browser-provider-saucelabs

npm install testcafe-browser-provider-electron

$ npm install cucumber
$ ./node_modules/.bin/cucumber-js features/**/*.feature

# features/user_login.feature
Feature: Login utilisateur
  En arrivant sur le site, l'utilisateur se connecte pour accéder à son profil.

  Scenario: Affichage de la Popup de login
    Given Je me rends sur la page home
    When Je clique sur le bouton "Connexion"
    Then La modale "Connexion au site" devrait apparaitre

  Scenario Outline: Connexion utilisateur
    Given Je me rends sur la page home
    When Je clique sur le bouton "Connexion"
    And Je saisis la valeur "<login>" dans le champ de saisie "Votre login"
    And Je saisis la valeur "<password>" dans le champ de saisie "Votre mot de passe"
    And Je clique sur le bouton primaire
    Then Le message suivant devrait apparaitre: "<result_login>"

    Examples:
      | login | password | result_login |
      | Tom   | 1234     | Erreur       |
      | Valid | Titi456! | Succès       |

import { Before, Given, Then, When } from 'cucumber';
import {PageObject} from '../page-objects/page-object';

When(/^Je me rends sur la page home$/, async function() {
  await this.page.gotoPage('');
});

When(/^Je clique sur le bouton "(.*?)"/, async function(buttonLabel: string) {
  await this.page.clickOnButton(buttonLabel);
});

When(/^Je saisis la valeur "(.*?)" dans le champ de saisie "(.*?)"$/,
    async function(value, inputLabel) {
  await this.page.writeInInput(inputLabel, value);
});

When(/^Je clique sur le bouton primaire$/, async function() {
  await this.page.clickOnPrimaryButton();
});

var {After, Before} = require('cucumber');

Before(function () {
  ...
});

Before(function (testCase, callback) {
  ...
  callback();
});

After(function () {
  ...
});

createTestCafe('localhost', 1338)
    .then(testcafe => {
        return testcafe.createRunner()
            .src('test.js')
            .browsers('chrome')
            .run();
    });

Before(function() {
  createTestCafe(config.host, 1338, 1339)
    .then(tc => {
      testcafe = tc;
      const runner = testcafe.createRunner();
      return runner
        .useProxy(config.proxy)
        .src(`node_modules/bdd-launcher/lib/test.js`)
        .screenshots(config.screenshotsPath, false)
        .concurrency(config.concurrency)
        .browsers(config.browsers)
        .run({ debugMode: config.debug })
        .then(() => {
          testcafe.close();
          runner.stop();
        })
        .catch(() => {
          console.log('closing testcafe on error...');
          testcafe.close();
        });
    });
  return this.waitForTestController
    .then(testController => testController.maximizeWindow());
});

import { ClientFunction, Selector } from 'testcafe';
import { waitForAngular, AngularSelector } from 'testcafe-angular-selectors';
import {TestCafeWorld} from '../support/world';

export class PageObject {

  getLocation = ClientFunction(() => document.location.href);
  goBack = ClientFunction(() => window.history.back());

  constructor(private t: TestController, private world: TestCafeWorld) {}

  getContent(): Selector {
    return this.getElement('body');
  }

  buttons(): Selector {
    return this.getElement('button');
  }

  buttonWithLabel(label: string): Selector {
    return this.buttons().withText(label);
  }

  gotoPage(page: string): Promise<any> {
    return this.t.navigateTo('/' + page);
  }

$ npm i bdd-testcafe --save-dev
$ npm run e2e
$ npm run e2e:report