JavaScript: the Future of End to End Testing

The State of Browser Test Automation

Javascript vs Java vs Python

  • JavaScript is already inside the browser. Obvious point. Why to learn two languages if you can use one?
  • Electron — a framework that allowed to wrap a browser inside JavaScript engine. It allowed creating a set of Selenium alternatives like Nightmare.js and Cypress.io
  • Chrome Dev Tools Protocol — a take from Chrome Development team on bringing their own (non-W3C standard) protocol for controlling browser.
  • All browser commands must run asynchronously (as they always need some time to finish)
  • Each test is a list of those commands
  • Each test should be linear and predictable

Tools for Browser Testing

https://cypress.io
Cypress.io executes tests inside a browser context with automatic waits and requests mocking.

Cypress.io

Cypress.io visual test runner brings joy to testing
  • using iframes
  • managing tabs
  • managing multiple windows
  • uploading files
  • downloading files
  • sending native keyboard and mouse events

WebDriver

The most popular Selenium WebDriver implementation in JS
  • Protractor — which is built on top of the official Selenium library and tries to bring Java-like syntax into JS.
  • webdriverio — alternative JavaScript implementation.
webdriverio is a modern WebDriver implementation
  • hardened setup — Java, Selenium Server and ChromeDriver (or IEDriver, GeckoDriver) needed. Not as easy to start comparing to Cypress.io
  • no access to browser internals — no request mocking, network interception, access to headers, or downloads out of box.
  • speed — the way WebDriver operates makes it about 3 times slower comparing to all alternatives.
  • strictness — WebDriver is a standard, so it is very strict about what you can do inside a browser. If an element is on a page but a center of element is not visible — you are not able to click that element. If element is moving — you can’t control it.
Puppeteer is browser control tool from Google

Puppeteer

Playwright

  • reduce the need for timeouts
  • better detection for element visibility before interaction
TestCafe is the fastest cross browser test runner

TestCafe

http://192.168.0.110:38475/xVPmF1Kwb/http://google.com/
CodeceptJS allows running tests in Puppeteer, WebDriver, TestCafe

CodeceptJS

  • What if we started writing tests in Puppeteer but then we received a requirement to support Safari in tests?
  • We started with WebDriver but we need more browser control that only Puppeteer can give us?
  • We started in TestCafe but some tests are unstable
  • We started with Cypress.io but our website contains iframes or we need to run tests in two windows.
CodeceptJS has its own graphical test runner

Conclusion

--

--

--

Web developer from Kyiv, Ukraine. Lead developer of Codeception testing framework. Tech consultant and trainer at http://sdclabs.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Custom commands to make work more efficient on Mac

How abstraction helps you get the most out of UI components

Tuple-Union conversions in TypeScript

JavaScript Ternary Operator

How to Disable the WordPress JSON REST API Without Plugin

Start Using Optional Chaining and Nullish Coalescing in React

How to write Javascript’s Class in different ways.

In continuation of task 7.1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Bodnarchuk @davert

Michael Bodnarchuk @davert

Web developer from Kyiv, Ukraine. Lead developer of Codeception testing framework. Tech consultant and trainer at http://sdclabs.com

More from Medium

Startup guide of Jest for testing your JavaScript code. (Beginner)

Principles and JavaScript . . .

Test Driven Development: Is It Unrealistic?

Don’t worry, it’s Jest a test