What Are End-to-End Tests? Do I Need Them?

Testing in a web app is never needed. No one is forcing you to integrate testing, but having tests helps you live a happier developer life — being sure something is being tested every time you change or add something.

End-to-end or E2E testing is a methodology used to test whether the flow of an application is performing as designed, from start to finish.

The entire web application is tested in a real-world scenario, such as communicating with the database, network, hardware and other services. In this case we will test a few websites online like Google or Hackernews.

Selenium 3.0

Selenium IDE, probably the nephew of the old Selenium, was created with the intention of making recording and play-backing of E2E tests for the web as easy as using a web browser with a mouse and keyboard.

The project is completely open source and it can be installed directly as a browser extension to start making test in less than one minute. It’s also part of the official Selenium family.

Getting started

  1. Installing the extension Selenium IDE on your browser. It’s really easy, just choose the right one for your browser:

2. Start recording your actions inside the browser.

3. Playback the test and add or fix your recorder behaviours.

So, How Does It Work?

You create or open a new project when you start the extension. If there are no other tests you will have to set the base URL of the website:

You then add a new test:

You playback the test to check that everything works. Usually some element in a specific step need to be changed from "css selector" to "X-Path" for example.

WARNING: you need to add your test to a test suite to run it in groups!

You should add the new test to a test suite, to enable you to group types of tests together and execute them in batches:

Adding to a test suite, go to test suites tab and press add tests Adding to a test suite, go to test suites tab and press add tests

If you prefer to watch a quick video walk-through:

Can I Record a Test From a Specific Route of the Website?

Yes — you just need to change the first instruction of your test from:

Command = open, Target = "/sub_domain_page_url"

To the following Target:

Command = open, Target = /websitepagename

Exporting the Results?

You can decide to keep your tests as Selenium IDE files with a .side extension or export them to various formats of tests, such as:

To export click the three dots to the right of a test name.

I usually prefer to keep the .side extension to add more tests easily and to be able to integrate them with a continuous integration pipeline but I’ll discuss this in the next section.

Continuous Integration with CircleCI

If you decided to keep the .side extension you will be easily able to run the test in a pipeline like the ones available for free with CircleCI, free also for private repositories!

I’ve created an example repository for you to get inspired from the simple structure of the tests folder and a .circleci/config.yml to configure chrome and selenium to run the tests on the Cloud of Circle.

In my repository I’ve given you a complete example of Selenium IDE running for various website, like Google and Hackernews on CircleCI from here.

If you want to understand how I was able to make it run on CirlceCI, read the next section.

If you just want to use my repository I hope you I have helped demonstrate how easy it is to create end-to-end tests without having to manually write every single test.

Running Selenium IDE CLI on My Local PC

If you want to configure the selenium drivers you can read more on the official documentation of the command line runner. But I’ll share a few tips for running the CLI, like I did with Travis. You will need to setup a few components:

To configure CLI you need to add these global packages:

npm install -g selenium-side-runner webdriver-manager

Then you have to properly configure Chrome to be be able to get its version running from the command line. Check if it is present on your system PATH — if not add the Chrome folder to your PATH:

google-chrome — product-version

Write down this version and then use webdriver-manager to install the right chromedriver version:

webdriver-manager update — versions.chrome VERSION_ON_YOUR_PC

For example if I had chrome version " 77.0.3865.40" I would type:

webdriver-manager update — versions.chrome 77.0.3865.40

And finally run the tests:

selenium-side-runner ./tests/my_side_file_test.side

If you want to run all tests inside a folder just use "*" star:

selenium-side-runner ./tests/*.side

My New Motto!

Less fatigue in creating tests = More tests being created by developers!

Sources and References