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 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.
- 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:
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:
- JUnit, used for Java projects
- Pytest, used for Flask projects in Python
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
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.
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:
- Seleniun-Side-Runner the CLI to run the tests
- Browser that can be run from the command line, in this example Chrome
- Install the proper driver to run your web browser, for the test ChromeDriver.
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:
If you want to run all tests inside a folder just use “*” star:
My New Motto!
Less fatigue in creating tests = More tests being created by developers!