Forem: Dmitrii Bormotov

Modular Import in Page Objects

Dmitrii Bormotov — Sat, 04 Feb 2023 07:14:54 +0000

Ahoy, mate!

This topic may be useful for test automation engineers who'd like to make their code look better!

I wrote about Page Objects in Cypress earlier - take a look if you haven't already! Modular import isn't a new thing, and if you haven't heard about it and its profits before - you can find more in an article from @fahadaminshovon :

How to use index.js file(Properly)

B.M. Fahad-ul-Amin ・ Mar 29 '22

#javascript #typescript #react #webdev

Source code of project from this article on GitHub: https://github.com/bormando/swag-tests/pull/2/files

In short, it structures your code better, let's see how...

How it was

It's pretty usual, when during a test you navigate from one page to another. In that case you need to import all pages involved into that spec file:

import AuthPage from '../pages/auth.page'
import ProductsPage from '../pages/products.page'

But what if that test involves more pages? And usually spec file combines multiple test suites - which probably means A LOT of pages if we combine all tests.

How to improve it

We can declare a folder that contains page objects to be a module (and technically it is). To do that, simply add index.js file in the (page) folder.

This file is an "entry point" of our "pages" module. You say there what would you like to export from the module, like this:

export * from './auth.page'
export * from './products.page'
export * from './cart.page'

* means everything

If you'd like to export ready-to-use page instances in Cypress with this structure, you'll need to rewrite exports as well:

import Page from './page'
...

export const CartPage = new class extends Page {
  ...
}

Code above says that new instance of the class will be created when you'll import this page in your tests. It's a bit different than default export like this:

export default new CartPage()

default export lets you set any name you like when you import whatever you do, while the other construction sets a specific name for the instance that you export.

How it looks now

Now you don't call every page file to import the page you need:

import {AuthPage, ProductsPage} from '../pages'

pages folder is a module now and you name objects you'd like to get from there that were exported.

This practice may be used with other modules as well, like Page Elements.

TypeScript Setup for REST API Tests

Dmitrii Bormotov — Sun, 13 Nov 2022 18:21:16 +0000

Ahoy, mate!

This topic may be useful for test automation engineers who just started to learn TypeScript. It also extends my previous post:

Minimal REST API tests in Node.js

Dmitrii Bormotov ・ Dec 24 '20

#rest #node #testing #qa

TypeScript is a JavaScript superset in Node.js, which brings static types and other useful features to your project.

Under the hood, it transforms the code you written to the one that your platform understands (ES5 standard).

Source code of project from this article on GitHub: https://github.com/bormando/mochapi/tree/future

Setup

You may clone a GitHub repo with few example tests from here: https://github.com/bormando/mochapi/tree/main

After cloning, you must execute this command to download all required dependencies:

npm i

To check, if cloned project is working, you may run:

npm run test

It should display something like this in the end:

Install TypeScript dependencies

These are standard TypeScript dependencies that we'll need to download:

typescript
ts-node (to transform code from TypeScript to EcmaScript 5 standard on run)

Also, keep in mind that some Node.js packages like mocha & chai doesn't come with TypeScript, so you'll have to install them separately as well:

@types/mocha
@types/chai

To install them all, you'll need to execute in terminal:

npm i -D typescript ts-node @types/mocha @types/chai

TypeScript configuration

Now, as we've finished dependencies installation, we need to configure TypeScript.

Simply execute npx tsc --init in your project root which will create tsconfig.json.

I recommend these options for new projects:

Don't forget to save changes.

ES5 vs TypeScript

You may read about base differences between ES5 and TypeScript here:

TypeScript vs. JavaScript. Why was TypeScript developed when we… | by Avelon Pang | Geek Culture | Medium

Avelon Pang ・ Jun 23, 2021 ・
Medium

In our current project, all you'll have to do is:

Rename markets.test.js to markets.test.ts.
Change imports in markets.test.ts file...

From this:

const axios = require('axios');
const assert = require('chai').assert;

To this:

import axios from 'axios';
import { assert } from 'chai';

These are the small changes but this is all we need to make sure that our TypeScript setup works fine (since this is the point of current article).

Reconfigure shortcut

Shortcut for running Mocha tests in ES5 looks like this:

"test": "npx mocha src/specs"

You may find it in scripts section inside of package.json file.

To convert code TypeScript code to JavaScript on-run, you need to change this shortcut on something like this:

"test": "npx mocha --require ts-node/register src/specs/**/*.test.ts"

ts-node/register works as a converter in this case.

Also notice src/specs/**/*.test.ts in the end - now we have to specify test files pattern, as Mocha looks for .js files by default.

Running tests

We're good to go by now, so all you have to do is execute in terminal:

npm test

npm run test

And then you must see report in your terminal output:

Thanks for reading, hope you've learned something new.

Node.js debugging in automated tests

Dmitrii Bormotov — Thu, 14 Jul 2022 20:24:03 +0000

Ahoy, mate!

This topic may be useful for those who started test automation in Node.js recently. The article is written in POV of test automation engineer, but I'm sure that every other beginner in Node.js will find it useful.

What's debugging and why I'd need it?

Debugging is the process of finding and resolving bugs. In other words, when we run some code and it doesn't act as expected - we seek for lines of code that cause this misbehaviour.

There are two ways of getting information from your code:

Logging.
Attaching a debugger.

Logging

I think you're already familiar with this one. When you execute some command, you simply use console.log() to log its result into console.

const result = 2 + 3
console.log(result) // 5

const response = await axios.get(url)
const body = response.data
console.log(body)

Sounds familiar?

Attaching a debugger

Instead of logging every inch of your app, it'd probably be a good idea to just point a few lines of code in your project where you'd like to stop for a while and inspect what's going on at these specific lines.

Let's say that we execute an HTTP request with Axios and for some reason your tests are failing and you see that response body doesn't match the one that expected.

Time to ~~log this sh~~ attach a debugger!

Visual Studio Code

First, simply mark a line of code (click to the left of the line number) where you'd like to stop when your tests will be executed. There red dots are breakpoints.

After that, instead of using your regular terminal, open `JavaScript Debug Terminal:

In this terminal you may simply use the command that you were using to execute your tests (like npm test) as usual.

Your test run will make a stop at the breakpoint (1). You'll see the cached data that you may reach from the current line of code (2).

You may go to the next breakpoint from there (3) or restart your current run (4) or detach debugger (5).

You may find other ways to attach a debugger in VSC, but I prefer this one.

WebStorm

It's pretty similar to Visual Studio Code in the first step - you mark the line of code that you need as a breakpoint:

And then you run your code almost as usual, but use debug (bug) icon instead:

Your test run will make a stop at the breakpoint (1). You'll see the cached data that you may reach from the current line of code (2).

You may go to the next breakpoint from there (3) or restart your current run (4) or stop execution (5).

Conclusion

Debugger helps us with inspection of the data that we store in application's cache. You don't need to add console.log() anymore to see what's going on (especially, if there's more than one thing that you want to log).

I think most of you'll agree that this method is more useful and interactive than logging. Plus, it's more readable when you have a lot of data to process (like a very long array or an object), since you can fold/unfold whole sections (objects/arrays).

Thanks for reading, hope you've learned something new.

Babel Setup for REST API Tests

Dmitrii Bormotov — Thu, 28 Jan 2021 20:15:05 +0000

Ahoy, mate!

This topic may be useful for beginners in Test Automation or those testers who works with other languages (like Java or Python) and new to JavaScript (Node.js). It also expands my previous post:

Minimal REST API tests in Node.js

Dmitrii Bormotov ・ Dec 24 '20

#rest #node #testing #qa

Babel is a tool that convert ES5 to modern versions (ES6+) of code.

ES (ECMAScript) is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers. ECMAScript is commonly used for client-side scripting on the World Wide Web, and it is increasingly being used for writing server applications and services using Node.js. By default, Node.js uses ES5, which was released a long time ago, in 2009.

Source code of project from this article on GitHub: https://github.com/bormando/mochapi/tree/modern

Setup

You may clone a GitHub repo with few example tests from here: https://github.com/bormando/mochapi/tree/main

After cloning, you must execute this command to download all required dependencies:

npm i

To check, if cloned project is working, you may run:

npm run test

It should display something like this in the end:

Install Babel dependencies

These are standard Babel dependencies that we'll need to download:

@babel/cli
@babel/core
@babel/plugin-transform-runtime
@babel/preset-env
@babel/register

To install them, you'll need to execute in terminal:

npm i -D @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/register

Babel configuration

Now, as we've finished dependencies installation, we need to configure Babel.

Simply create .babelrc file in root directory of our project and add this data to it:

Don't forget to save changes.

ES5 to ES6+

You may read about most of the changes between ES5 and ES6+ with examples here:

Difference between ES 5 and ES 6. Let me summarises the difference es5 vs… | by Muthukumaraswamy | Medium

Muthukumaraswamy ・ Jan 31, 2019 ・
muthuks.Medium

In our current project, all you'll have to do is to change imports in markets.test.js file…

From this:

const axios = require('axios');
const assert = require('chai').assert;

To this:

import axios from 'axios';
import { assert } from 'chai';

These are the small changes but this is all we need to make sure that our Babel setup works fine (since this is the point of current article).

Reconfigure shortcut

Shortcut for running Mocha tests in ES5 looks like this:

"test": "npx mocha src/specs"

You may find it in scripts section inside of package.json file.

To convert code ES6+ code to ES5 on-run, you need to change this shortcut on something like this:

"test": "npx mocha --require @babel/register src/specs"

--require @babel/register works as a converter in this case.

Running tests

We're good to go by now, so all you have to do is execute in terminal:

npm test

npm run test

And then you must see report in your terminal output:

Thanks for reading, hope you've learned something new.

Minimal REST API tests in Node.js

Dmitrii Bormotov — Thu, 24 Dec 2020 19:07:55 +0000

Ahoy, mate!

This topic may be useful for beginners in Test Automation or those testers who works with other languages (like Java or Python) and new to JavaScript (Node.js).

Source code of project from this article on GitHub: https://github.com/bormando/mochapi/tree/main

Tools

REST (REpresentational State Transfer) is an architectural style for providing standards between computer systems on the web, making it easier for systems to communicate with each other.

This is the one of most popular API architectures, so we're going to test one of it's creatures.

For minimal configuration we're going to need these:

Test runner.

This tool allows us to define test scenarios and combine them into test suites. It also allows us to run these scenarios and suites. One of the most popular test runners for Node.js is Mocha - we'll use this one.
Assertion library.

Assertion library is a set of assertions (or expectations) for our test scenarios. Test runners usually contains some basic assertions set, but we're going to include this one too so we could accustom beginners to these libraries, especially Chai (this is our choice for current article).
HTTP client.

And this one makes REST API test automation possible. This is a tool that sends requests to HTTP (API) server. One of the most popular solutions in this area is Axios - this is our guy.

We'll also need Postman or similar tool (f.e. SoapUI, TestMace, Insomnia) to send few requests manually.

I use Visual Studio Code as IDE.

As an example of REST API server, we'll use public endpoint of crypto market Bitfinex:

GET https://api-pub.bitfinex.com/v2/ticker/tBTCUSD

Setup

First of all, we'll need to create a project directory. After that, we must open it in console (terminal in MacOS/Linux or CMD/PowerShell in Windows) and execute command:

npm init -y

After this command execution you'll find package.json file in your project's root directory. This file contains your package info, we'll get back to it later.

Next, we need to install dependencies (chosen tools from previous section):

npm i -D mocha chai axios

Now, when we have our package initialized and dependencies installed - we need to create files and folders structure...

In project's root directory we'll create src directory, and then specs as a subdirectory of src.

src is a primary place for our project's code,
specs contains test suites.

In specs directory we create markets.test.js file. Here we'll define our test scenarios.

At current state our project structure should look like this:

Test cases

Let's make a GET request to the API endpoint that we're testing: https://api-pub.bitfinex.com/v2/ticker/tBTCUSD

As we can see, the response body looks like this:

[
    23003,
    26.09947727,
    23004,
    32.433429860000004,
    -948,
    -0.0396,
    23003,
    13562.61526307,
    24052.99388042,
    21884
]

Response body contains list of numbers and this structure won't change if you'll execute this request few more times, only values will (since this pair is being traded without stop).

So, we can define at least 3 test scenarios here:

Status-code of response must be 200 (OK).
Response body must contain list with length of 10 values (nor more nor less).
Response body must contain list with number values only.

Coding

Finally, we can start writing code to automate our test scenarios. First of all, we have to define our test suite - let's name it 'price data', since we're checking on BTC/USD pair on crypto market:

describe('price data', () => {
    // test scenarios and/or hooks
});

Previously, we have defined test scenarios for automation, so let's hold on for a second and think for something that they have in common. Of course, it's the data that they check on. So what can we do to not to duplicate our code (and not to execute a request in each test)? We'll use hooks (or actually, a hook)!

const axios = require('axios');

describe('price data', () => {
    let data;

    before(async () => {
        await axios.get('https://api-pub.bitfinex.com/v2/ticker/tBTCUSD')
            .then((response) => {
                data = response;
            });
    });
});

As you can see, we've added Axios import into our test suite, so we could execute requests to our API.

Hook 'before' is being executed before all the tests in our test suite, so we gather data using Axios and store it into data variable, that is defined just above the 'before' hook.

Also, pay attention that await is used so we could wait for request to finish execution so we could continue. If you won't use await - you'll have data variable undefined in your tests.

Next, we're going to add our three test scenarios and import Chai to check on assertions:

const axios = require('axios');
const assert = require('chai').assert;

describe('price data', () => {
    let data;

    before(async () => {
        await axios.get('https://api-pub.bitfinex.com/v2/ticker/tBTCUSD')
            .then((response) => {
                data = response;
            });
    });

    it('has 200 response code', () => {
        assert.equal(data.status, 200, 'the response code is not 200');
    });

    it('contains 10 values', () => {
        assert.equal(data.data.length, 10, 'number of values is not 10');
    });

    it('values should be numbers', () => {
        for (const value of data.data) {
            assert.isNumber(value, `value '${value}' is not a number`);
        }
    });
});

First one simply checks if status field from our test data is 200.

Second scenario gets length of response body's list and collates it with 10.

Third and final case is using for loop to cycle through response body list's values and checks if every value is a number.

Seems pretty easy to understand and code, huh?

Running tests

Let's get back to package.json file that is being stored in our project's root directory...

Find test key and replace it's value (not key) with npx mocha src/specs.

You can add description and author values if you like, but that's not not necessary.

Your package.json file should look like this:

{
  "name": "mochapi",
  "version": "1.0.0",
  "description": "API test automation with Mocha and Axios",
  "scripts": {
    "test": "npx mocha src/specs"
  },
  "keywords": [],
  "author": "Dmitrii Bormotov",
  "license": "ISC",
  "devDependencies": {
    "axios": "^0.21.0",
    "chai": "^4.2.0",
    "mocha": "^8.2.1"
  }
}

Now, you can run your tests by simply executing command in console while in your project's root directory:

npm run test or npm test

After run completion, you'll see report like this:

Now you may consider yourself REST API test automator. :)

Thanks for reading, hope you've learned something new.

Forem: Dmitrii Bormotov

Modular Import in Page Objects

How to use index.js file(Properly)

B.M. Fahad-ul-Amin ・ Mar 29 '22

How it was

How to improve it

How it looks now

TypeScript Setup for REST API Tests

Minimal REST API tests in Node.js

Dmitrii Bormotov ・ Dec 24 '20

Setup

Install TypeScript dependencies

TypeScript configuration

ES5 vs TypeScript

TypeScript vs. JavaScript. Why was TypeScript developed when we… | by Avelon Pang | Geek Culture | Medium

Avelon Pang ・ Jun 23, 2021 ・ Medium

Reconfigure shortcut

Running tests

Node.js debugging in automated tests

What's debugging and why I'd need it?

Logging

Attaching a debugger

Visual Studio Code

WebStorm

Conclusion

Babel Setup for REST API Tests

Minimal REST API tests in Node.js

Dmitrii Bormotov ・ Dec 24 '20

Setup

Install Babel dependencies

Babel configuration

ES5 to ES6+

Difference between ES 5 and ES 6. Let me summarises the difference es5 vs… | by Muthukumaraswamy | Medium

Muthukumaraswamy ・ Jan 31, 2019 ・ muthuks.Medium

Reconfigure shortcut

Running tests

Minimal REST API tests in Node.js

Tools

Setup

Test cases

Coding

Running tests

Avelon Pang ・ Jun 23, 2021 ・
Medium

Muthukumaraswamy ・ Jan 31, 2019 ・
muthuks.Medium