Git Product home page Git Product logo

testcafe-starter's Introduction

TestCafe Starter

Build Status Build status Gherkin with TestCafe

A lightweight and extensible framework to write e2e tests in a gherkin-like syntax.

fixture('Feature: TestCafe Example')
  .before(async (ctx) => {
    // inject global configuration in the fixture context
    ctx.config = getCurrentConfig();
  })
  .beforeEach(async (t) => {
    // inject page model in the test context
    t.ctx.inputData = pageModel;
    await given('I navigate to the testcafe sample page');
  });

test('Scenario: cannot submit my feedback when I did not enter my name', async () => {
  await then('no name should be populated');
  await and('I cannot submit my feedback on testcafe');
});

test('Scenario: can send feedback with my name only', async () => {
  await when('I enter my name');
  await then('I can submit my feedback on testcafe');
});

test('Scenario: send feedback', async () => {
  await given('I enter my name');
  await when('I send my feedback on testcafe');
  await then("a 'Thank you' message should appear with my name");
});

demo

Benefit from TypeScript Strong Typing and Visual Studio Code IntelliSense to write tests that are aligned with the business

demo

After cloning the repo

  • run the command npm install.

To execute the tests locally

  • run the command npm test.

To execute the tests locally with an HTML report of tests execution

  • run the commands:

    npm run test:json
    npm run report

This will generate a nice and searchable HTML report like this (more details here):

report

To execute the tests on TeamCity

  • run the command npm run test:teamcity.

To configure the target environment and the target persona

  • add the following options to the TestCafe command-line --env=xxx --user=yyy
  • you can create any type of option on the command-line: see the readme in the config folder.

To create custom command-line options on top of TestCafe command-line options

  • You can add any custom command-line options to the existing TestCafe command-line options.
  • To do this, customize the content of parsed-config.ts.

To check for typescript and linting errors

  • run the command npm run build.

To debug a test in Visual Studio Code

  • set one or more breakpoints in your code
  • setup the TestCafe configuration used by the debug session in the default-config.ts file
  • in the Debug menu, select the TestCafe option
  • if you want to start TestCafe with specific command-line options you can modify the launch.json file
  • Start debugging

To use Live mode

Live mode provides a service that keeps the TestCafe process and browsers opened the whole time you are working on tests. Changes you make in code immediately restart the tests. That is, TestCafe Live allows you to see test results instantly.

  • rename the feature file into a name that ends with .live.ts
  • add .only to the test(s) on which you want to work live
  • run the command npm run test:live

Visual Studio Code requirements

  • the VS Code version must be >= 1.18.0

Recommended Visual Studio Code Extensions

How to jump into the implementation of a step (Visual Studio Code)

  • Go to the Command Palette with ⌘P (Ctrl+P on Windows)

  • Start typing the sentence. For example I send my feedback on testcafe

  • select the found step file:

    find the step implementation

How to create a new feature file

How to create a new step-definition file

How to run a test only in specific environment(s)

  • The environment is the host that will execute the TestCafe tests.

  • The environment is set in the config object injected at runtime in the Fixture Context.

  • All possible values are, by convention, defined in the environments.ts file

  • Add this line as a first step in the test:

test('Scenario: send feedback', async () => {
  await env.only('devci');
  //
  await given('I enter my name');
  await when('I send my feedback on testcafe');
  await then("a 'Thank you' message should appear with my name");
});

demo

  • to select another environment, just use the VS Code IntelliSense: available environments

  • to target multiple environments:

test('Scenario: send feedback', async () => {
  await env.only('uat', 'devci');
  //
  await given('I enter my name');
  await when('I send my feedback on testcafe');
  await then("a 'Thank you' message should appear with my name");
});

How to execute a test from Visual Studio Code IDE

To start a test from the IDE you need to install the Visual Studio Code extension TestCafe Test Runner.

To run a specific test

Right-click on the test and and select TestCafe: Run Test(s) in... for the required browser.

To run all tests in a feature file

Right-click on the feature file within the Explorer panel and select TestCafe: Run Test(s) in... for the required browser.

testcafe-starter's People

Contributors

hdorgeval avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

testcafe-starter's Issues

Suggestion

This project is very a good idea in order to have e2e tests written in Gerhkins style however it is tightly coupled to Test Café
It would be better to be agnostic of the technology of the selectors and can choose protractor, test café and so ?
What do you think?

Report does not show failed tests

When executing npm run testcafe-static-analyser the report always show the tests results as passed even when they fail.

static-analyser-report.json

  "name": "I should see first and last name",
            "result": {
              "duration": 0,
              "status": "passed"
            },

console output:

1) AssertionError: expected 'Automated Test' to include 'aaa'

     Browser: Chrome 71.0.3578 / Linux 0.0.0

        10 |/**
        11 | * @step
        12 | * @then("I should see first and last name")
        13 | */
        14 |export default async (_: string) => {
      > 15 |  await t.expect(basePage.usermenuName.innerText).contains('aaa');
        16 |};
        17 |

Can't execute first step for npm install

After cloning this repo, and try to execute npm install, it will pop up an error like below.

> [email protected] preinstall C:\Users\nqwang\Documents\github\testcafe-starter
> rimraf node_modules

'rimraf' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] preinstall: `rimraf node_modules`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] preinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nqwang\AppData\Roaming\npm-cache\_logs\2018-10-26T06_05_13_257Z-debug.log

The reason is that computer doesn't have rimraf installed before executing npm install. It is better to update readme file to add this command npm install rimraf -g before npm install.

Integrating into an existing app

It seems this repo is meant to use as a boilerplate for a greenfield app? Are there instructions for adding the infrastructure to an existing app?

unable start tests more then in one browser simuntaneously

Set option "all" in "test" script
start "npm test"
Expected: all tests run in all locally installed browsers
Actual result: go error

"ERROR Unable to establish one or more of the specified browser connections. This can be caused by network issues or remote device failure."

image

dependency conflict

I am trying to use this repo for a PoC for a client and updated the dependencies to latest:

"dependencies": {
    "@types/chalk": "2.2.0",
    "@types/minimist": "1.2.2",
    "@types/node": "20.4.5",
    "chalk": "5.3.0",
    "jsome": "2.5.0",
    "minimist": "1.2.8",
    "rimraf": "5.0.1",
    "slash": "5.1.0",
    "testcafe": "3.1.0",
    "testcafe-browser-provider-saucelabs": "2.0.0",
    "testcafe-reporter-cucumber-json": "6.3.0",
    "ts-node": "10.9.1",
    "typescript": "3.9.6"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "3.6.1",
    "@typescript-eslint/parser": "3.6.1",
    "eslint": "8.46.0",
    "eslint-config-prettier": "8.9.0",
    "eslint-plugin-import": "2.28.0",
    "eslint-plugin-prettier": "5.0.0",
    "eslint-plugin-testcafe": "0.2.1",
    "mem": "9.0.2",
    "multiple-cucumber-html-reporter": "3.4.0",
    "prettier": "3.0.0"
  },

and getting the following error on npm install

npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/testcafe
npm ERR!   testcafe@"3.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer testcafe@"1.x" from [email protected]
npm ERR! node_modules/testcafe-reporter-cucumber-json
npm ERR!   testcafe-reporter-cucumber-json@"6.3.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Need more information on compatibility between testcafe-reporter-cucumber-json and testcafe latest versions.
I don't want to use --force unless it's the only option.

@hdorgeval any help would be highly appreciated.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.