icc-fe-regression-tests
v0.0.1
Published
ICC regression suite WebdriverIO tests with Cucumber
Downloads
5
Readme
WDIO Frontend framework
Requirements
- Node version 14 or higher
Tools
This test suite is built on top of WebDriverIO using the Cucumber framework.
The language used is Typescript.
Quick start
Choose one of the following options:
Clone the git repo
Follow authentication steps
Install the dependencies (
npm install
)
Now you are ready to write your own features and run the test with npm test:local
Authentication
After the node installation
Ensure that your %USERPROFILE%\.npmrc contains the Personal access token (PAT) to access the private @qasxp
packages:
- Ask to be added to D3 user groups.
- Go to https://alm.deltatre.it/tfs/D3Alm/QA%20Automation/_packaging?_a=connect&feed=qasxp and select
Connect to feed-> npm
, then in the main page underProject setup
please chooseOther
and not Windows. - Follow the instructions for
Setup credentials
.
Common issues
If during npm install
you are facing the issue
code ERESOLVE ERESOLVE unable to resolve dependency tree
please run
npm cache clear --force
npm install --legacy-peer-deps
How to write a test
Tests are written in Gherkin syntax
that means that you write down what's supposed to happen in a real language. All test files are located in
./src/features/*
and have the file ending .feature
. You will already find some test files in that
directory. They should demonstrate, how tests could look like. Just create a new file and write your first
test.
myFirstTest.feature
Feature:
In order to keep my product stable
As a developer or product manager
I want to make sure that everything works as expected
Scenario: Check title of website after search
Given I open the url "http://google.com"
When I set "WebdriverIO" to the inputfield "modal.input"
And I press "Enter"
Then I expect that the title is "WebdriverIO - Google Search"
Scenario: Another test
Given ...
This test opens the browser and navigates them to google.com to check if the title contains the search query after doing a search. As you can see, it is pretty simple and understandable for everyone.
How to create Page Object Model
This repository use Page Object Model (POM) approach, mixed with BDD style.
To write yours Models go in the folder src/pom
and create a new .ts
file declaring a class that will contains the identifiers.
export class Header {
public logo = ".icon-logo";
}
Then you have to register your models as custom world inside src/custom-world/pageObjectWorld.ts
export default class PageObjectWorld extends World {
public header: Header;
//define here other page object models
constructor(options: IWorldOptions) {
super(options);
this.header= new Header();
//initialize here other page object models
}
}
Have in mind that in the feature file you can refer to the page object model created, using the same name that you set as public property in the src/custom-world/pageObjectWorld.ts
#Good
When i click on "header.logo"
#Bad
When i click on "Header.logo"
When i click on "#logo-id"
How to run the test
To run your tests locally just call the WDIO runner:
$ npm test:local
How to generate report
To generate the report after a test runs just call
$ npm test:report
Inside the folder report you'll find cucumber.html file that you can open to see the results.
Configurations
Environment-specific configurations
You can setup multiple configs for specific environments. Let's say you want to have a different baseUrl
for
your local and STG tests. Use the wdio.conf.ts
to set all general configs (like mochaOpts) that don't change.
They act as default values. For each different environment you can create a new config with the following name
scheme:
wdio.<ENVIRONMENT>.conf.ts
Now you can create a specific config for your pre-deploy tests:
wdio.STG.conf.ts
var config = require("./wdio.conf.ts").config;
config.baseUrl = "http://staging.example.com";
exports.config = config;
Your environment-specific config file will get merged into the default config file and overwrites the values you set. To run a test in a specific environment just add the desired configuration file as the first parameter:
$ npm run wdio wdio.STAGING.conf.ts
Running single feature
Sometimes it's useful to only execute a single feature file, to do so use the following command:
$ npx wdio wdio.conf.ts --spec ./src/features/select.feature
Using tags
If you want to run only specific tests you can mark your features with tags. These tags will be placed before each feature like so:
@Tag
Feature: ...
To run only the tests with specific tag(s) use the --cucumberOpts.tagExpression=
parameter like so:
$ npx wdio wdio.conf.ts --cucumberOpts.tagExpression='@Tag or @AnotherTag'
For more tag options please see the Cucumber.js documentation
Pending test
If you have failing or unimplemented tests you can mark them as "Pending" so they will get skipped.
// skip whole feature file
@Pending
Feature: ...
// only skip a single scenario
@Pending
Scenario: ...
Adding new steps and snippets
The predefined snippets allow you to do a lot of common things but you might need extra snippets which
are better aligned with your aims. To do so you will find all step definitions in ./src/steps
. They
are separated in given
, when
and then
.
You define your snippet using regular expressions. This is pretty powerful as it allows you to create complex
sentences with multiple options. Everything that's within "([^"]*)?"
gets captured and appended to the
callback. The last argument is always a callback function that you need to call when your step is done.
You can access the browser and your WebdriverIO instance with browser
.
To assert values this boilerplate project uses WebdriverIOs embedded assertion library called expect-webdriverio.
Comments
You can add additional descriptive comments in your feature files.
###
This is a
block comment
###
Feature: As a bystander
I can watch bottles falling from a wall
So that I can be mildly amused
# This is a single line comment
Scenario: check if username is present
Given I login as "roboter" with password "test123"
Then the username "roboter" should be present in the header
List of predefined steps
Check out all predefined snippets.
Given steps
I open the (url|site) "([^"]*)?"
Open a site in the current browser window/tabthe element "([^"]*)?" is( not)* displayed
Check the (in)visibility of an elementthe element "([^"]*)?" is( not)* enabled
Check if an element is (not) enabledthe element "([^"]*)?" is( not)* selected
Check if an element is (not) selectedthe checkbox "([^"]*)?" is( not)* checked
Check if a checkbox is (not) checkedthere is (an|no) element "([^"]*)?" on the page
Check if an element (does not) existthe title is( not)* "([^"]*)?"
Check the title of the current browser window/tabthe element "([^"]*)?" contains( not)* the same text as element "([^"]*)?"
Compare the text of two elementsthe (button|element) "([^"]*)?"( not)* contains the text "([^"]*)?"
Check if an element contains the given textthe (button|element) "([^"]*)?"( not)* contains any text
Check if an element does not contain any textthe (button|element) "([^"]*)?" is( not)* empty
Check if an element is emptythe page url is( not)* "([^"]*)?"
Check the url of the current browser window/tabthe( css)* attribute "([^"]*)?" from element "([^"]*)?" is( not)* "([^"]*)?"
Check the value of an element's (css) attributethe cookie "([^"]*)?" contains( not)* the value "([^"]*)?"
Check the value of a cookiethe cookie "([^"]*)?" does( not)* exist
Check the existence of a cookiethe element "([^"]*)?" is( not)* ([\d]+)px (broad|tall)
Check the width/height of an elementthe element "([^"]*)?" is( not)* positioned at ([\d]+)px on the (x|y) axis
Check the position of an elementI have a screen that is ([\d]+) by ([\d]+) pixels
Set the browser size to a given sizeI have closed all but the first (window|tab)
Close all but the first browser window/taba (alertbox|confirmbox|prompt) is( not)* opened
Check if a modal is opened
Then steps
I expect that the title is( not)* "([^"]*)?"
Check the title of the current browser window/tabI expect that element "([^"]*)?" does( not)* appear exactly "([^"]*)?" times
Checks that the element is on the page a specific number of timesI expect that element "([^"]*)?" is( not)* visible
Check if a certain element is visibleI expect that element "([^"]*)?" becomes( not)* visible
Check if a certain element becomes visibleI expect that element "([^"]*)?" is( not)* within the viewport
Check if a certain element is within the current viewportI expect that element "([^"]*)?" does( not)* exist
Check if a certain element existsI expect that element "([^"]*)?"( not)* contains the same text as element "([^"]*)?"
Compare the text of two elementsI expect that (button|element) "([^"]*)?"( not)* contains the text "([^"]*)?"
Check if an element or input field contains the given textI expect that (button|element) "([^"]*)?"( not)* contains any text
Check if an element or input field contains any textI expect that (button|elementelement) "([^"]*)?" is( not)* empty
Check if an element or input field is emptyI expect that the url is( not)* "([^"]*)?"
Check if the the URL of the current browser window/tab is a certain stringI expect that the path is( not)* "([^"]*)?"
Check if the path of the URL of the current browser window/tab is a certain stringI expect the url to( not)* contain "([^"]*)?"
Check if the URL of the current browser window/tab contains a certain stringI expect that the( css)* attribute "([^"]*)?" from element "([^"]*)?" is( not)* "([^"]*)?"
Check the value of an element's (css) attributeI expect that checkbox "([^"]*)?" is( not)* checked
Check if a check-box is (not) checkedI expect that element "([^"]*)?" is( not)* selected
Check if an element is (not) selectedI expect that element "([^"]*)?" is( not)* enabled
Check if an element is (not) enabledI expect that cookie "([^"]*)?"( not)* contains "([^"]*)?"
Check if a cookie with a certain name contains a certain valueI expect that cookie "([^"]*)?"( not)* exists
Check if a cookie with a certain name existI expect that element "([^"]*)?" is( not)* ([\d]+)px (broad|tall)
Check the width/height of an elementI expect that element "([^"]*)?" is( not)* positioned at ([\d]+)px on the (x|y) axis
Check the position of an elementI expect that element "([^"]*)?" (has|does not have) the class "([^"]*)?"
Check if an element has a certain classI expect a new (window|tab) has( not)* been opened
Check if a new window/tab has been openedI expect the url "([^"]*)?" is opened in a new (tab|window)
Check if a URL is opened in a new browser window/tabI expect that element "([^"]*)?" is( not)* focused
Check if an element has the focusI wait on element "([^"]*)?"( for (\d+)ms)*( to( not)* (be checked|be enabled|be selected|be visible|contain a text|contain a value|exist))*
Wait for an element to be checked, enabled, selected, visible, contain a certain value or text or to existI expect that a (alertbox|confirmbox|prompt) is( not)* opened
Check if a modal is openedI expect that a (alertbox|confirmbox|prompt)( not)* contains the text "$text"
Check the text of a modal
When steps
I (click|doubleclick) on the (link|button|element) "([^"]*)?"
(Double)click a link, button or elementI (add|set) "([^"]*)?" to the inputfield "([^"]*)?"
Add or set the content of an input fieldI clear the inputfield "([^"]*)?"
Clear an input fieldI drag element "([^"]*)?" to element "([^"]*)?"
Drag an element to another elementI submit the form "([^"]*)?"
Submit a formI pause for (\d+)ms
Pause for a certain number of millisecondsI set a cookie "([^"]*)?" with the content "([^"]*)?"
Set the content of a cookie with the given name to the given stringI delete the cookie "([^"]*)?"
Delete the cookie with the given nameI press "([^"]*)?"
Press a given key. You’ll find all supported characters here. To do that, the value has to correspond to a key from the table.I (accept|dismiss) the (alertbox|confirmbox|prompt)
Accept or dismiss a modal windowI enter "([^"]*)?" into the prompt
Enter a given text into a modal promptI scroll to element "([^"]*)?"
Scroll to a given elementI close the last opened (window|tab)
Close the last opened browser window/tabI focus the last opened (window|tab)
Focus the last opened browser window/tabI log in to site with username "([^"]*)?" and password "([^"]*)?"
Login to a site with the given username and passwordI select the (\d+)(st|nd|rd|th) option for element "([^"]*)?"
Select an option based on it's indexI select the option with the (name|value|text) "([^"]*)?" for element "([^"]*)?"
Select an option based on its name, value or visible textI move to element "([^"]*)?"( with an offset of (\d+),(\d+))
Move the mouse by an (optional) offset of the specified element