End-to-end testing with Selenium + Nightwatch.js
Unit, integration and end-to- end tests
Integration testing
End to End / GUI Testing
Unit, integration and end-to- end tests
70/20/10 rule
Selenium
● Set of tools for browser automation.
● The first implementation worked by injecting JavaScript in the browser.
● New implementation (Selenium WebDriver) is a REST API and a JSON protocol to send commands to the browser.
● This API is now a W3C standard.
● Allows writing tests in many languages.
Selenium Server
● A Java application that acts as a proxy between a language binding and a driver.
● Implements the full WebDriver API
● Presents the same API for all language bindings.
● Allows for remote execution of commands.
Selenium Grid
● Selenium-Grid allows you to run your tests on different machines against different browsers in parallel.
● Supports running a single test suite against many combinations of browsers and operating systems at the same time.
● Can be configured to run the same test suite on the same browser in different machines to reduce the time the tests take to run.
Selenium Grid
BrowserStack support
● Remote execution of tests via Selenium Grid.
● Offers a public endpoint which the test framework/Selenium Server can connect to send commands.
● Requires a subscription to use this service.
Enter Nightwatch.js ● A Node.js binding for Selenium.
● Provides a fluent API to write tests.
● Includes its own test runner.
● Powerful yet simple syntax.
● Allows finding elements in the page via CSS selectors or XPath or a mix of both.
● Check it out from http://nightwatchjs.org/
● Extend it with your own commands!
● Useful extensions here: https://github.com/maxgalbu/nightwatch-custom- commands-assertions
Our first example!
● A Nightwatch.js test to check the Head to Head section of the WTA site.
● Clone it from https://bitbucket.org/roberto-balarezo/ll- nightwatch.git
● Gecko Driver can be downloaded from: https://github.com/mozilla/geckodriver/releas es
Issues
● Cannot click on overlapped elements.
● The text of non-visible elements is always the empty string.
● Text of elements is returned as shown in the page, not as present in DOM
Cucumber
● According to their site: “Cucumber is a tool for running automated tests written in plain language.”
● Allows defining tests as stories or series of steps.
● Makes tests understandable for non-technical people.
● It is a framework which parses Gherkin language files and executes code based on what is declared on them.
● Implementations of Cucumber exist for the most popular languages.
Gherkin language
● Plain text language to define “executable specifications”.
Feature: Google Search Checks that Google search is working as expected.
Scenario: Searching Google Given I open Google's search page Then the title is "Google" And the Google search form exists
Show me the code!
● The same example as before now reimplemented in Gherkin.
● You can clone it from https://bitbucket.org/roberto-balarezo/ll- nightwatch-cucumber.git
Drawbacks
● All steps are in the same namespace. You cannot have a step with the same name but different implementation.
● Process does not exit on test failure when you have a mix of Nightwatch and Cucumber tests.
Links
● https://testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html
● https://codeahoy.com/2016/07/05/unit-integration-and-end-to-end-tests-finding-the-right- balance/
● https://www.linkedin.com/pulse/selenium-webdriver-architecture-core-ankur-shrivastava
● http://qeworks.com/selenium-webdriver-architecture/
● http://nightwatchjs.org/api
● https://cucumber.io/
● https://github.com/cucumber/cucumber-js
● https://github.com/cucumber/cucumber/wiki/Gherkin
● https://github.com/maxgalbu/nightwatch-custom-commands-assertions
● https://huddle.github.io/Resemble.js/
● https://github.com/webdriverio/webdrivercss-adminpanel
Thank you!