What’s codeceptjs
This library seems like a framework which is capable of handling your Selenium / Appium in the same code. Sound exciting for me. SO thought of evaluating ….
How to add the step definition on your fav. editor like VS Code / Webstorm
Add codeceptjs def. If it’s succesful it will give you something as below.
TypeScript Definitions provide autocompletion in Visual Studio Code and other IDEs
Definitions were generated in steps.d.ts
Load them by adding at the top of a test file:
/// <reference path="./steps.d.ts" />
Reports
Install it via NPM:
npm i mochawesome
If you get an error like this
"mochawesome" reporter not found
invalid reporter "mochawesome"
Make sure to have mocha installed or install it:
npm i mocha -D
Execute CodeceptJS with HTML reporter:
codeceptjs run --reporter mochawesome
if you want screenshots for failed tests, the simply add it to the mochawesome helper to the config.
How to identify elements with in Page?
I.seeElement('.user'); // element with CSS class user
I.seeElement('//button[contains(., "press me")]'); // button
I.seeElement({css: 'div.user'});
I.seeElement({xpath: '//div[@class=user]'});
//Strict locators allow to specify additional locator types:
// locate form element by name
I.seeElement({name: 'password'});
// locate element by id
I.seeElement({id: 'users'});
// locate element by [aria-label] attribute in web
// or by accessibility id in mobile
I.seeElement('~username');
Click
// search for link or button
I.click('Login');
//To narrow down the results we can specify a context in second parameter.
I.click('Login', '.nav'); // search only in .nav
I.click('Login', {css: 'footer'}); // search only in footer
To skip the global search pass exact strict locator (or start locator with // or . or #). In this case you are not limited to buttons and links. Any element found by that locator is clicked.
// click element by CSS
I.click('#signup');
// click element located by name inside a form
I.click({name: 'submit'}, '#user>form');