Automating react application

Nowadays we all moving towards frameworks like Angular, react Js, Vue JS, etc.

So for Quality teams we have also started looking for options which support scripting language. But before starting any new things a wise approach is to understand the requirement & then look for suitable solution which full-fill it.

Options I considered

1. Protractor
2. Jest
3. Nightwatch JS
4. Cypress
5. webdriver JS
6. selenium

Cucumber Scenario set up in a typescript-driven protractor framework.

In this blog, I will describe how I have mapped the feature file to step definition and then to page objects in a protractor driven cucumber project.

Background:

The project is based on

• Protractor
• Typescript
• Cucumber – BDD
• Page Object Model

Was unable to find a step for “”: Mapping stepDefinitions to feature file in cucumber

Was unable to find step for “Given open application as admin user”cucumberautocomplete

While working with cucumber, when steps are not mapped completely with the feature files, it usually gives this as a warning.

In this blog, I will share how can we map the step definition with the feature files.

How does the feature look like?

unimplemented_methods

But I already have a step defined for this, then why this error is coming?

Implementing page object model using protractor and typescript

Before we dwell on some facts let us step back and understand why I am actually writing this blog. As we understand with this rapid growth not only the developers but we Automation Test Engineers are also constantly grooming ourselves by learning new stuff.

Be it a new programming language or a scripting language we have to widen our thoughts. So while thinking of creating a new automation framework now we are discussing things like handling promises, synchronization, infrastructures, continuous testing, continuous integration, version control, etc

In one of the recent projects, I have created a framework in which we picked a new tech stack in contrast to the one which is widely used (Yes, I am talking about Java+ Eclipse + TestNg.)

Let’s go deep dive and understand what all I have done for automating an application for which Frontend is written in Aurelia and Backend in C#

protractor- session not created: Chrome version must be between 70 and 73

DevTools listening on ws://127.0.0.1:57284/devtools/browser/f4efc932-01f3-4ac5-8a77-b19e65f2849b
 [14:36:42] E/launcher - session not created: Chrome version must be between 70 and 73
   (Driver info: chromedriver=2.45.615291 (ec3682e3c9061c10f26ea9e5cdcf3c53f3f74387),platform=Windows NT 10.0.17134 x86_64)
 [14:36:42] E/launcher - SessionNotCreatedError: session not created: Chrome version must be between 70 and 73
   (Driver info: chromedriver=2.45.615291 (ec3682e3c9061c10f26ea9e5cdcf3c53f3f74387),platform=Windows NT 10.0.17134 x86_64)
     at Object.checkLegacyResponse (C:\Users\khyati.sehgal\source\Workspaces\QA\SAND-DEV-1\node_modules\protractor\node_modules\selenium-webdriver\lib\error.js:546:15)
     at parseHttpResponse (C:\Users\khyati.sehgal\source\Workspaces\QA\SAND-DEV-1\node_modules\protractor\node_modules\selenium-webdriver\lib\http.js:509:13)
     at doSend.then.response (C:\Users\khyati.sehgal\source\Workspaces\QA\node_modules\protractor\node_modules\selenium-webdriver\lib\http.js:441:30)
     at 

Getting started with the protractor

As an automation QA Engineer,  I always try to work on areas where I can work with pace and efficiency, technology doesn’t matter. As the world is moving towards scripting language We as a QA also work together.

I am talking about the AngularJS, ReactJS applications which are highly acceptable and readily used in today’s world be it a Banking app or a CRM based. One can connect to all the application with frontend as a JS app and backend can be anything C# , Java ,etc. Here the role of QA is to identify the best fit he/she can apply to quickly automate all the cases in a highly compatible language which supports the Frontend application.

Here, I am talking about protractor. For one of my applications which is written in Aurelia (FE tool to create an application similar to AngularJS) we decided to work upon protractor, let’s talk about it in this blog how we managed to do it.

When it comes to testing applications, there are two main types of tests one wants to cover: Unit and E2E . End to end usually refers to the QA testing and unit mainly for the developers to take ownership of.

Reporting in protractor based automation framework

Reporting is one of the major features which completes the framework. This is something which impacts the stakeholder and gives them the real picture as a whole without looking into the nitty-gritty.

I have tried integrating a couple of reports in a protractor based automation framework which I have prepared for an Aurelia based application.  In this post, I will share the one which I finally implemented and works for me.

SyntaxError: Unexpected token while working with protractor on the local machine

 ERROR log

D:\Protractor\node_modules\protractor\built\logger.js:76
 info(...msgs) {
 ^^^
 SyntaxError: Unexpected token ...
 at exports.runInThisContext (vm.js:53:16)
 at Module._compile (module.js:414:25)
 at Object.Module._extensions..js (module.js:442:10)
 at Module.load (module.js:356:32)
 at Function.Module._load (module.js:313:12)
 at Module.require (module.js:366:17)
 at require (module.js:385:17)
 at Object. (D:\gramLabs\code\Protractor\gramLabs\node_modules\protractor\built\configParser.js:6:18)
 at Module._compile (module.js:435:26)
 at Object.Module._extensions..js (module.js:442:10)

TS issue with Circular dependency

TypeError: Class extends value undefined is not a function or null

Unhandled rejection TSError: Unable to compile TypeScript

Problem statement

DevTools listening on ws://127.0.0.1:52555/devtools/browser/24e3b3aa-b5fe-4940-bfb8-b1c18e4c60df
Unhandled rejection TSError:  Unable to compile TypeScript
Cannot find type definition file for ‘chai’. (2688)
Cannot find type definition file for ‘core-js’. (2688)
Cannot find type definition file for ‘node’. (2688)
Cannot find type definition file for ‘selenium-webdriver’. (2688)
e2e\hooks\CommonHook.ts (7,16): Cannot find name ‘require’. (2304)

at getOutput (D:\workspace\GIT\QA-e2e\node_modules\ts-node\src\index.ts:316:17)
at D:\workspace\GIT\QA-e2e\node_modules\ts-node\src\index.ts:347:18
at Object.compile (D:\workspace\GIT\QA-e2e\node_modules\ts-node\src\index.ts:474:19)
at Module.m._compile (D:\workspace\GIT\QA-e2e\node_modules\ts-node\src\index.ts:410:44)
at Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Object.require.extensions.(anonymous function) [as .ts] (D:\workspace\GIT\QA-e2e\node_modules\ts-node\src\index.ts:413:12)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:690:17)
at require (internal/modules/cjs/helpers.js:25:18)
at D:\workspace\GIT\QA-e2e\node_modules\cucumber\lib\cli\index.js:135:16
at Array.forEach (<anonymous>)
at Cli.getSupportCodeLibrary (D:\workspace\GIT\QA-e2e\node_modules\cucumber\lib\cli\index.js:134:24)
at Cli.<anonymous> (D:\workspace\GIT\QA-e2e\node_modules\cucumber\lib\cli\index.js:144:39)
at Generator.next (<anonymous>)

Unhandled rejection RangeError: Maximum call stack size exceeded

While working with protractor with Typescript I and my team was facing this issue. I thought of sharing this here as it was a good finding. The issue was this:-

Unhandled rejection RangeError: Maximum call stack size exceeded
    at new Wait (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\utilities\Wait.ts:5:1)
    at new SelectDropDown (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\utilities\SelectDropDown.ts:5:1)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:29:23)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)
    at new CLASS3 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS3.ts:26:25)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:30:41)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)
    at new CLASS3 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS3.ts:26:25)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:30:41)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)
    at new CLASS3 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS3.ts:26:25)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:30:41)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)
    at new CLASS3 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS3.ts:26:25)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:30:41)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)

Soft assertions in protractor based typescript automation framework

How many of us has seen that while running code at once glance if the code fails at some step, then other test steps which meant to run post that step is marked as skipped in the final result?

Also, how about rephrasing the same sentence such that the code does not run and marked as skipped in the final run-results challenging the law of ‘fail-fast’. By the execution, we can not infer whether the code was wrong or the functionality dint work as it was an incomplete run for the one who ran it. I am sure many of the QA folks can relate to this. To be more precise, can we relate to this console screenshot.

Pages: Page 1, Page 2