WebDriverIO – Run Authentication Login Test

<<Previous Post               <<Complete WebDriverIO Tutorial>>               Next Post>>

WebDriverIO – Run General Authentication Login Test

Following are the steps you need to follow for executing your General Authentication Login Test Script using WebDriverIO tool :-

Prerequisites:-

For prerequisites you can visit my last tutorial post on WebDriverIO – Run your first automation script 

If you haven’t messed around with WebdriverIO till now, I’ll quickly explain that it’s a functional test automation framework. It allows you to script out page actions to take in a browser, and validate that the actions had the desired effect.

Let’s move forward and run WebDriverIO with the test runner this time!!

Before installing the test runner, we need to initialize an empty NPM project. This will allow cli (Will be explained below) to install needed dependencies.

Step 1:- Create a folder ‘General_Authentication_Login_Test’ on your desktop (You can create folder with any name)

Step 2:- Open the Git Bash from the above created folder (In our case ‘General Authentication Login Test’ folder)

Step 3:- Trigger the below command in Git Bash Window :

$ npm init –y

The -y will answer ‘yes’ to all the prompts, giving us a standard NPM project.

Step 4:- Install the cli. By Triggering the below command in Git Bash Window:

Note: cli is an alternative to Git Bash, and it helps WebDriverIO to read commands in a better way.

$ npm i --save-dev @wdio/cli

To check whether wdio cli has been installed successfully or not. open package.json by running below command in Git Bash Terminal :-

$ vim package.json

Refer Screenshot below :-

Now close details of package.json by clicking on CTRL + Z on Keyboard.

Step 5:- Generate Configuration File. Since we haven’t created one yet, WebdriverIO is smart enough to figure that out and help us through the process.

Run Below Command

$ ./node_modules/.bin/wdio config

Here are the answers I chose: (Move your arrow buttons on keyboard to select the options and enter)

• > First press Enter key followed by the below answers
• > Shall I install the runner plugin for you? (Y/n) Y
• > Where do you want to execute your tests? On my local machine
• > Which framework do you want to use? mocha
• > Shall I install the framework adapter for you? Y
• > Do you want to run WebDriverIO commands synchronous or asynchronous? Sync
• > Where are your test specs located? ./test/specs/**/*.js Press Enter key
• > Which reporter do you want to use? Press Spacebar and followed by Enter key (It will automatically select dot – https://www.npmjs.com/package/@wdio/ )
• > Shall I install the reporter library for you? Y
• > Level of logging verbosity? Info Press Enter keys
• > What is the base url? http://localhost Press Enter key
  
  Verify wdio.conf.js file gets created successfully in General_Authentication_Login_Test on running  Step 5.

Refer Screenshot :-

Step 6:- Folder & File set up

We told WebdriverIO that we’ve got our tests stored in the test folder by mentioning ./test/specs/**/*.js in the above step. Now let’s create the mentioned folder say ‘test’. Then, create another folder specs in which create a file called test_login.js (First create an empty text file and save it as test_login.js to get this created) and open it up in your favorite text editor say NotePad or NotePad++.

WebdriverIO can be set up to use Mocha, which is what I did in my configuration answers earlier (i.e. Step 5 configurations)

Now, for our needs, we’ll set up the following:

Before setting the things, lets understand the below sample code in Mocha:

The following is the sample code for creating a function in Mocha (The following is the Mocha code)

You do need both describe and it, as that’s the hierarchy Mocha expects. The it goes inside the describe block. Inside of the it block we’ll put our tests.

There are four unique steps to perform this test:

1. Go to the login page.
2. Enter Invalid Credentials.
3. Click submit.
4. Validate the error message.

Let’s go through these one at a time.

Going to the login page

The basic way to move to various pages in WebdriverIO is to use the url command (WebDriverIO command). If you pass in text to it, WebdriverIO will tell the browser to navigate to that specific webpage.

You could pass in the entire URL of the page you want to test, but since we’ve already defined the domain we’re testing on (see config generation above in Step 5 configurations), all we have to pass in is the path.

That looks like:

Entering Invalid credentials

We’re on our login page with our login form, we need to enter our username/email and password

The WebDriverIO command we need to use for this is called ‘addValue‘. It works by accepting an element selector and a text value to insert in said element.

Note: #input-email is the CSS Selector locator value for username field and #input-password is the CSS Selector locator value for password field (This is just a sample code, the real time example follows)

Submit the Login Form

click() WebDriverIO command for clicking the Submit button.

Validating the Error Message for Wrong Credentials

We’re going to use ‘assertions’ to check the status for us.

Note: getText() WebDriverIO command for retrieving the text from the UI element.

Where did this magical assert come from?

Yes, I neglected to mention the minor detail of loading Node’s ‘assert’ library.

Thankfully that is pretty easy. Just shoot up to the top of your file and add: (Shown in the below screenshot)

const assert = require('assert');

Here’s the full script just for easier reference:

const assert = require('assert');

describe('Tutorials Ninja Login Form', () => {
  it('should not allow login with invalid username', () => {
    browser.url('http://tutorialsninja.com/demo');
    browser.pause('2000');
    $('/html[1]/body[1]/nav[1]/div[1]/div[2]/ul[1]/li[2]/a[1]').click();
    browser.pause('2000');
    $('=Login').click();
                browser.pause('2000');
    $('#input-email').addValue('asdaad');
    $('#input-password').addValue('[email protected]$');
    $('[type="submit"]').click(); 
    browser.pause('2000');
    const error = $('/HTML[1]/BODY[1]/DIV[2]/DIV[1]').getText();
    console.log(error);
    assert.equal(error, 'Warning: No match for E-Mail Address and/or Password.');
    browser.pause('2000');
  });
});

Let’s run our tests!

Note :- Before Running your test make sure wdio.conf should have following highlighted configuration in the file. (Open in an editor say NotePad and NotePad++)

We’ve got our test written and our assertions in place. Time to try it all out.

Make sure your geckodriver is running. If not, run it using the below command:

$ geckodriver.exe

In another GitBash terminal window opened from ‘General_Authentication_Login_Test’ folder, run

$ ./node_modules/.bin/wdio

If everything is set up correctly, you will see a Firefox browser momentarily pop up on your screen.

Hopefully your test completed and passed.

Now, you can try writing your own WebDriverIO code into the test_login.js file (Refer step 6 Screenshot) – Try Example scenario say logging to the www.tutorialsninja.com/demo application.

Comment ‘Success’ in this post if you are able to practically achieve this exercise.

Next Steps:

> To learn more about WebDriverIO, continue to the next post (Click on Next Post link below)

> Check complete WebDriverIO Tutorial Contents here (Click here)

Please leave your questions/comments/feedback below.

Happy Learning ?

About Me > Ajay Lunia 

Connect to me on LinkedIn (Click here)

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post               <<Complete WebDriverIO Tutorial>>               Next Post>>