teatime-test-utils

Collection of implemented Page objects for the Teatime Components. Designed to be used in automatic tests with WebDriverIO bindings.

Table of contents

• Usage
• Setup
• Extensibility
• Useful links

Usage

Usually, interaction with the web-interfaces results in getting or setting some state of its elements. In order to implement these actions using WebDriver bindings, you require locators for the elements and certain commands.

Locators provide you possibility to identify an element in the content of the web application. Usually, it is a CSS selector. Teatime Test Utils contains all the necessary CSS selectors for interaction with Teatime Components. You may find them at pageObject folder. Since Teatime Components use CSS Modules, it guarantees that all the CSS selectors will be unique. Simple examples should look like this:

example of the action-button click in the interface

const Button = require('teatime-test-utils/pageObject/Button');
 
it('should click the button', () => {
  browser.click(Button.action);
  // assert it was clicked
});

In order to make more complex interactions like setting the inputs value or choosing particular option in the selects menu, Teatime Test Utils provide you functions getValue and setValue. Unlike WebDriverIOs same commands, these contain information about inner implementation of Teatime Components. To use them, you should provide attribute name selector like in the example below:

example of setting inputs value

const {getValue, setValue} = require('teatime-test-utils');
 
it('should set input value', () => {
  setValue()('[name="username"]', 'Alexey');
  // assert it was setted
});

Setup

Use of Teatime Test Utils requires compilation of your code.

In the first place, you should add a posibility to threat your CSS files as a commonJS modules. Keep in mind that CSS tokens in tests should be generated in the same way as in the tested web application.

Addtionaly, I suggest you to compile the code of your tests with babel-preset-power-assert in order to receive detailed information in the error-reports.

Extensibility

Should mention about tool/index.js. Coming soon.

Useful links

• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors
• https://github.com/SeleniumHQ/selenium/wiki/JsonWireProtocol
• https://jpetazzo.github.io/2015/09/03/do-not-use-docker-in-docker-for-ci/
• https://medium.com/@griggheo/running-selenium-webdriver-tests-using-firefox-headless-mode-on-ubuntu-d32500bb6af2#.52djxp6rs
• https://medium.com/@griggheo/setting-up-jenkins-to-run-headless-selenium-tests-in-docker-containers-99528390bce7#.ae9nyy30m

License

The MIT License