Code Monkey home page Code Monkey logo

demo-webdriverio-mocha's Introduction

E2E tests with WebDriverIO and Mocha

Commitizen friendly Action Status

This is a demonstration project of integration tests. In this project the user sends a message to the customer service on Automation Practice.
These tests are developed in TypeScript with WebDriverIO V7 and Mocha

Features

┌─────────┬──────────────────────┬─────────────┬─────┬─────────┬──────────┬──────────┐
│ (index) │         name         │ averageTime │ sem │ repeats │ minValue │ maxValue │
├─────────┼──────────────────────┼─────────────┼─────┼─────────┼──────────┼──────────┤
│    0    │    'LoginProcess'    │    4243     │  0  │    1    │   4243   │   4243   │
│    1    │ 'SendMessageProcess' │    1408     │  0  │    1    │   1408   │   1408   │
└─────────┴──────────────────────┴─────────────┴─────┴─────────┴──────────┴──────────┘
  • Page Object Pattern
  • Commit lint and Commitizen
  • ESlint
  • Prettier
  • Husky
  • Github Actions example
  • Allure report (screenshots on failure)

Requirements

Getting Started

Install the dependencies:

npm install

Compile TypeScript:

npm run build

Run e2e tests:

npm run tests:e2e

Run visual regression tests:

npm run tests:visualregression

Reports

Allure

Run this command to generate the allure report in the directory ./test-report/allure-report:

npm run report:generate

You can run this command to start a server on your machine and open the allure report on the browser:

npm run report:open

Prettier and Eslint

Run to format the code:

npm run code:format

Commit

We use the best practices for message's commit, using Commit lint and Commitizen we can generate changelogs automatically.

Run npm run commit and commitizen will help you.

demo-webdriverio-mocha's People

Contributors

dependabot[bot] avatar warleygabriel 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

Watchers

 avatar

demo-webdriverio-mocha's Issues

Invalid switch - "dist"

Hi ,

when ii do build i'm getting below error

### Invalid switch - "dist".
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: npx del ./dist && npx tsc && npx copyfiles -f ./src/test/e2e/features/** ./dist/src/test/e2e/features/
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

my tsconfig

{
"compilerOptions": {
"module": "CommonJS",
"lib": ["es2017"],
"target": "es2019",
"removeComments": true,
"noImplicitAny": true,
"strictPropertyInitialization": true,
"strictNullChecks": true,
"skipLibCheck": true,
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"sourceMap": false,
"esModuleInterop": true,
"resolveJsonModule": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"": ["node_modules/"]
},
"types": ["node", "webdriverio/async", "@wdio/cucumber-framework"]
},
"include": ["./**/*"]
}

my wdio.conf.ts

const path = require('path')

export const config: WebdriverIO.Config = {
autoCompileOpts: {
autoCompile: true,
// see https://github.com/TypeStrong/ts-node#cli-and-programmatic-options
// for all available options
//Authorhttps://github.com/ArminazK/wdio7_multiremote
tsNodeOpts: {
transpileOnly: true,
project: 'tsconfig.json'
},
// tsconfig-paths is only used if "tsConfigPathsOpts" are provided, if you
// do please make sure "tsconfig-paths" is installed as dependency
// tsConfigPathsOpts: {
// baseUrl: './'
// }
},
//
// ====================
// Runner Configuration
// ====================
//
// WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
// on a remote machine).
runner: 'local',
//
// ==================
// Specify Test Files
// ==================
// Define which test specs should run. The pattern is relative to the directory
// from which wdio was called.
//
// The specs are defined as an array of spec files (optionally using wildcards
// that will be expanded). The test for each spec file will be run in a separate
// worker process. In order to have a group of spec files run in the same worker
// process simply enclose them in an array within the specs array.
//
// If you are calling wdio from an NPM script (see https://docs.npmjs.com/cli/run-script),
// then the current working directory is where your package.json resides, so wdio
// will be called from there.
//
// specs: [
// './src/features/.feature'
// ],
specs: ['./dist/**/
.feature'],
// Patterns to exclude.
exclude: [
// 'path/to/excluded/files'
],
//
// ============
// Capabilities
// ============
// Define your capabilities here. WebdriverIO can run multiple capabilities at the same
// time. Depending on the number of capabilities, WebdriverIO launches several test
// sessions. Within your capabilities you can overwrite the spec and exclude options in
// order to group specific specs to a specific capability.
//
// First, you can define how many instances should be started at the same time. Let's
// say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
// set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
// files and you set maxInstances to 10, all spec files will get tested at the same time
// and 30 processes will get spawned. The property handles how many capabilities
// from the same test should run tests.
//
maxInstances: 1,
//
// If you have trouble getting all important capabilities together, check out the
// Sauce Labs platform configurator - a great tool to configure your capabilities:
// https://docs.saucelabs.com/reference/platforms-configurator
//
capabilities: [{

    // maxInstances can get overwritten per capability. So if you have an in-house Selenium
    // grid with only 5 firefox instances available you can make sure that not more than
    // 5 instances get started at a time.
    maxInstances: 2,
    //
    browserName: 'chrome',
    acceptInsecureCerts: true
    // If outputDir is provided WebdriverIO can capture driver session logs
    // it is possible to configure which logTypes to include/exclude.
    // excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
    // excludeDriverLogs: ['bugreport', 'server'],
}],
//
// ===================
// Test Configurations
// ===================
// Define all options that are relevant for the WebdriverIO instance here
//
// Level of logging verbosity: trace | debug | info | warn | error | silent
logLevel: 'error',
//
// Set specific log levels per logger
// loggers:
// - webdriver, webdriverio
// - @wdio/applitools-service, @wdio/browserstack-service, @wdio/devtools-service, @wdio/sauce-service
// - @wdio/mocha-framework, @wdio/jasmine-framework
// - @wdio/local-runner
// - @wdio/sumologic-reporter
// - @wdio/cli, @wdio/config, @wdio/utils
// Level of logging verbosity: trace | debug | info | warn | error | silent
// logLevels: {
//     webdriver: 'info',
//     '@wdio/applitools-service': 'info'
// },
//
// If you only want to run your tests until a specific amount of tests have failed use
// bail (default is 0 - don't bail, run all tests).
bail: 0,
//
// Set a base URL in order to shorten url command calls. If your `url` parameter starts
// with `/`, the base url gets prepended, not including the path portion of your baseUrl.
// If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
// gets prepended directly.
baseUrl: 'http://localhost',
//
// Default timeout for all waitFor* commands.
waitforTimeout: 10000,
//
// Default timeout in milliseconds for request
// if browser driver or grid doesn't send response
connectionRetryTimeout: 120000,
//
// Default request retries count
connectionRetryCount: 3,
//
// Test runner services
// Services take over a specific job you don't want to take care of. They enhance
// your test setup with almost no effort. Unlike plugins, they don't add new
// commands. Instead, they hook themselves up into the test process.
services: [
    [
        'selenium-standalone',
        {
            // drivers to install
            installArgs: {
                version: '3.141.59',
                baseURL: 'https://selenium-release.storage.googleapis.com',
                drivers: {
                    chrome: {
                        version: '90.0.4430.24',
                        arch: process.arch,
                        baseURL: 'https://chromedriver.storage.googleapis.com',
                    },
                   
                   
                },
            }, // drivers to use
            args: {
                version: '3.141.59',
                drivers: {
                    chrome: {
                        version: '90.0.4430.24',
                        arch: process.arch,
                    },
                  
                },
            },
        },
    ],
],

// Framework you want to run your specs with.
// The following are supported: Mocha, Jasmine, and Cucumber
// see also: https://webdriver.io/docs/frameworks
//
// Make sure you have the wdio adapter package for the specific framework installed
// before running any tests.
framework: 'cucumber',
//
// The number of times to retry the entire specfile when it fails as a whole
// specFileRetries: 1,
//
// Delay in seconds between the spec file retry attempts
// specFileRetriesDelay: 0,
//
// Whether or not retried specfiles should be retried immediately or deferred to the end of the queue
// specFileRetriesDeferred: false,
//
// Test reporter for stdout.
// The only one supported by default is 'dot'
// see also: https://webdriver.io/docs/dot-reporter
reporters: ['spec'],


//
// Options to be passed to Mocha.
// See the full list at http://mochajs.org/
cucumberOpts: {
   
    require: ['./dist/**/*.steps.js'],
   
  //  require: ['./src/steps/*.steps.ts'],
    backtrace: false,
    compiler: [],
    dryRun: false,
    failFast: true,
    format: ['pretty'],
    colors: true,
    snippets: true,
    source: true,
    profile: [],
    strict: false,
    tags: [],
    timeout: 300000,
    ignoreUndefinedDefinitions: false,
    tagExpression: 'not @skip',
},
//
// =====
// Hooks
// =====
// WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
// it and to build services around it. You can either apply a single function or an array of
// methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
// resolved to continue.
/**
 * Gets executed once before all workers get launched.
 * @param {Object} config wdio configuration object
 * @param {Array.<Object>} capabilities list of capabilities details
 */
// onPrepare: function (config, capabilities) {
// },
/**
 * Gets executed before a worker process is spawned and can be used to initialise specific service
 * for that worker as well as modify runtime environments in an async fashion.
 * @param  {String} cid      capability id (e.g 0-0)
 * @param  {[type]} caps     object containing capabilities for session that will be spawn in the worker
 * @param  {[type]} specs    specs to be run in the worker process
 * @param  {[type]} args     object that will be merged with the main configuration once worker is initialised
 * @param  {[type]} execArgv list of string arguments passed to the worker process
 */
// onWorkerStart: function (cid, caps, specs, args, execArgv) {
// },
/**
 * Gets executed just before initialising the webdriver session and test framework. It allows you
 * to manipulate configurations depending on the capability or spec.
 * @param {Object} config wdio configuration object
 * @param {Array.<Object>} capabilities list of capabilities details
 * @param {Array.<String>} specs List of spec file paths that are to be run
 */
// beforeSession: function (config, capabilities, specs) {
// },
/**
 * Gets executed before test execution begins. At this point you can access to all global
 * variables like `browser`. It is the perfect place to define custom commands.
 * @param {Array.<Object>} capabilities list of capabilities details
 * @param {Array.<String>} specs        List of spec file paths that are to be run
 * @param {Object}         browser      instance of created browser/device session
 */
// before: function (capabilities, specs) {
// },
/**
 * Runs before a WebdriverIO command gets executed.
 * @param {String} commandName hook command name
 * @param {Array} args arguments that command would receive
 */
// beforeCommand: function (commandName, args) {
// },
/**
 * Hook that gets executed before the suite starts
 * @param {Object} suite suite details
 */
// beforeSuite: function (suite) {
// },
/**
 * Function to be executed before a test (in Mocha/Jasmine) starts.
 */
// beforeTest: function (test, context) {
// },
/**
 * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
 * beforeEach in Mocha)
 */
// beforeHook: function (test, context) {
// },
/**
 * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
 * afterEach in Mocha)
 */
// afterHook: function (test, context, { error, result, duration, passed, retries }) {
// },
/**
 * Function to be executed after a test (in Mocha/Jasmine).
 */
// afterTest: function(test, context, { error, result, duration, passed, retries }) {
// },


/**
 * Hook that gets executed after the suite has ended
 * @param {Object} suite suite details
 */
// afterSuite: function (suite) {
// },
/**
 * Runs after a WebdriverIO command gets executed
 * @param {String} commandName hook command name
 * @param {Array} args arguments that command would receive
 * @param {Number} result 0 - command success, 1 - command error
 * @param {Object} error error object if any
 */
// afterCommand: function (commandName, args, result, error) {
// },
/**
 * Gets executed after all tests are done. You still have access to all global variables from
 * the test.
 * @param {Number} result 0 - test pass, 1 - test fail
 * @param {Array.<Object>} capabilities list of capabilities details
 * @param {Array.<String>} specs List of spec file paths that ran
 */
// after: function (result, capabilities, specs) {
// },
/**
 * Gets executed right after terminating the webdriver session.
 * @param {Object} config wdio configuration object
 * @param {Array.<Object>} capabilities list of capabilities details
 * @param {Array.<String>} specs List of spec file paths that ran
 */
// afterSession: function (config, capabilities, specs) {
// },
/**
 * Gets executed after all workers got shut down and the process is about to exit. An error
 * thrown in the onComplete hook will result in the test run failing.
 * @param {Object} exitCode 0 - success, 1 - fail
 * @param {Object} config wdio configuration object
 * @param {Array.<Object>} capabilities list of capabilities details
 * @param {<Object>} results object containing test results
 */
// onComplete: function(exitCode, config, capabilities, results) {
// },
/**
 * Gets executed when a refresh happens.
 * @param {String} oldSessionId session ID of the old session
 * @param {String} newSessionId session ID of the new session
 */
//onReload: function(oldSessionId, newSessionId) {
//}

}

Update to WebdriverIO v8

Hey 👋

Thanks for providing this boilerplate project. We are about to release a new major release for WebdriverIO: v8. Please update the dependencies for this project so that users can start with the latest upcoming release. You can read more about the release here.

Let me know if you have any questions! Thank you!

Docker image steps/ requirements

Hi Gabriel,
Thank you for setting up the repo. It is really helpful.

But we cannot use the docker image that you have in the docker-compose.yml file. Could you give me more information about what is required in building the docker image. What all libraries are involved?

you help is really appreciated.
Thanks

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.