Catcher’s external modules 5.1.0 were finally released. It’s great news as it enables Selenium step for Front-end testing!

Image for post

How should proper e2e test look like?

Imagine you have a user service with nice UI, which allows you to get information about users, registered in your system. Deeply in the back-end you also have an audit log, which saves all actions.

Image for post

Before 5.1.0 you could use HTTP calls to mimic front-end behavior to trigger some actions on the back-end side.

Your test probably looked like:

  • call http endpoint to search for a user

  • check search event was saved to the database

  • compare found user with search event, saved in the database

This test checks 100% of back-end functionality. But most likely front-end is the part of your system also! So proper end-to-end test should start with front-end application and end up in a back-end.

Without touching front-end you could have false-positive results in e2e tests. F.e.: a user has some special symbols in his name. All back-end tests passes and you deploy your application in production. After the deploy your users start to complain that front-end part of the application crashes. The reason is — front-end can’t handle back-end’s response when rendering user details with special symbols in his name.

With the new Catcher’s version you can include Front-end in your test. So — instead of calling http you can use selenium step.

The test

Let’s write a test, which will search for a user and will check that our search attempt was logged.

Every test starts with variables. To cover false-positive results we need to save multiple users and then check that only the correct one is returned. Let’s compose our users. Every user will have a random email and random name thanks to random built-in function.

variables: 
  users: 
    - name: '{{ random("name") }}' 
      email: '{{ random("email") }}' 
    - name: '{{ random("name") }}' 
      email: '{{ random("email") }}' 
    - name: '{{ random("name") }}' 
      email: '{{ random("email") }}'

Now we are ready to write our steps.

Populate the data

The first step we need to do is to populate the data with prepare step.

Let’s prepare a users.sql which will create all back-end tables (in case of clean run we don’t have them).

CREATE TABLE if not exists users_table( 
     email varchar(36) primary key, 
     name varchar(36) NOT NULL 
);

Next — we need to fill our table with test data. users.csv will use our users variable to prepare data for our step.

email,name 
{%- for user in users -%} 
{{ user.email }},{{ user.name }} 
{%- endfor -%}

The step itself will take users.sql and create database tables if needed. Then it will populate it using users.csv based on users variable.

steps: 
  - prepare: 
      populate: 
        postgres: 
          conf: '{{ postgres }}' 
          schema: users_table.sql 
          data: 
            users: users.csv 
      name: Populate postgres with {{ users|length }} users

Select a user to search for

The next (small) step is to select a user for our search. Echo step will randomly select user from users variable and register it’s email as a new variable.

- echo: 
    from: '{{ random_choice(users).email }}' 
    register: {search_for: '{{ OUTPUT }}'} 
    name: 'Select {{ search_for }} for search'

#selenium #catcher #end-to-end-testing #testing

End-to-end from front-end to back-end with Catcher
1.95 GEEK