WebdriverIO Introduction in PHPStorm

Hi folks,
Trying various frameworks is fun and interesting and will ultimately lead to improve yourself as a Test Automation Engineer by enabling you to have a better idea regarding the available options when it comes to frameworks. This will in fact help you to choose the ideal automation framework for your corporate project as a Test Automation Engineer. Few days back, I had the opportunity to automate a React app using WebdriverIO. Let's have a look at it !!

Setting up WebdriverIO project on PHPStorm
Pre-requisites
- Create React app package has to be installed, it simply sets up the tools you need to start your React project on PhpStorm.

 npm install -g create-react-app

- Node.js has to be installed, Refer the link
1. Create a new project -> React App


2. WebdriverIO client has to be installed

npm i --save-dev @wdio/cli

3. Next, we have to generate a configuration file that stores all of our WebdriverIO settings. To do that just run the configuration utility. It will install the relevant packages and create a config file with the name wdio.conf.js

./node_modules/.bin/wdio config

 At the moment I have gone with the default settings, which can be changed later too

Note : Each time when you create a new project you need to generate the config file

4. Node.js run configuration
Since we cannot run wdio specs using mocha test runner

JavaScript file : node_modules/@wdio/cli/bin/wdio.js
Application parameters : wdio.conf.js

Sample code

Pre-requisites

I have written the automation scripts for asana web application, since it is written in React. For that I have created an account in asana.

Covered areas in code

1. Page object pattern

2. Get data from JSON file

3. Scenarios what I tried out

• File upload (eg : jpeg)
• Search field using ENTER keyword
• Drop down selection
• Checkbox selection/deselection

Page object pattern

I have created 2 javascript classes for page, 1st Javascript class includes the URL what we are going to use, 2nd Javascript class extends the super class (1st Javascript)

Directory structure

Main page class

var data = require('../pages/data.json');

function Pages() {
    this.title = 'My page';
}
Pages.prototype.open = function () {
    browser.url(data.url)

};
module.exports = Pages;

Login page

var Pages = require('../pages/Pages.js');

class LoginPage extends Pages {
    get tryNowButton() {
        return $('.horizontalNavigation-item.hidden-logged-in');
    }

    get email() {
        return $('input[name="e"]');
    }

    get password() {
        return $('input[name="p"]');
    }

    get submit() {
        return $('#login-submit-modal-login');
    }

    login(email1, password1) {

        browser.execute("arguments[0].click();", this.tryNowButton);

       // this.tryNowButton.click();
        this.email.setValue(email1);
        browser.waitUntil(() => {
            return this.password
        }, 5000, 'timed out in password');
        this.password.setValue(password1);
        this.submit.click();
    }

    open() {
        super.open('login');
    }
}

module.exports = LoginPage;

Activity page

class ActivityPage {

    get newButton() {
        return $('div.Button.Button--small.Button--primary.Omnibutton.Omnibutton--withoutSpreadsheetGrid.TopbarPageHeaderGlobalActions-omnibutton')
    }

    get taskButton() {
        return $('a.Omnibutton-dropdownButton.Omnibutton-addTask')
    }

    get taskName() {
        return $('.QuickAddTaskContents-nameInput')
    }

    get createTaskButton() {
        return $('.Button.Button--small.Button--primary.QuickAddTaskToolbar-createButton')
    }

    get searchField() {
        return $('#topbar_search_input')
    }

    get userProfile() {
        return $('.AvatarPhoto.AvatarPhoto--small.TopbarPageHeaderGlobalActions-settingsMenuAvatar.Avatar--color5')
    }

    get profile() {
        return $('span=My Profile Settings…')
    }

    get saveChange() {
        return $('div.Button.Button--medium.Button--primary')
    }

    get removeLink() {
        return $('button.PhotoUpload-removeButton.LinkButton')
    }

    get toggleButtonOn() {
        return $('label.Switch-label')
    }

    get setLastDay() {
        return $('input.ValidatedTextInput-input.textInput.textInput--large.DateInput-textInput')
    }

    get setFirstDay() {
        return $('input.textInput.textInput--large.DateInput-textInput')
    }

    get tabClick() {
        return $$('a.tabView-tabName')
    }

    get ddlClick() {
        return $('#profile_settings_weekstartday_select')
    }

    get weekSelection() {
        return $$('span.MenuItem-label')
    }

    get checkboxSelection() {
        return $$('label.Checkbox-box.Checkbox-box--unchecked.Checkbox-box--enabled.Checkbox-box--primary')
    }

    taskCreation(taskname1) {
        this.newButton.click();
        this.taskButton.click();
        this.taskName.setValue(taskname1);
        browser.pause(3000);
        this.createTaskButton.click()
    }

    search(searchValue) {
        this.searchField.setValue(searchValue);
        browser.keys("\uE007");
        browser.pause(20000);
    }

    fileUpload1() {

        this.userProfile.click();
        this.profile.click();
        browser.pause(2000);

        const fileUpload = $('input[type="file"]');
        browser.execute(
            // assign style to elem in the browser
            (el) => el.style.display = 'block',
            // pass in element so we don't need to query it again in the browser
            fileUpload
        );
        browser.pause(3000);
        fileUpload.waitForDisplayed();
        const path = require('path');
        const filePath = path.join(__dirname, 'download.jpeg');
        fileUpload.setValue(filePath);
        browser.pause(5000);
        this.saveChange.click();
        browser.pause(5000);
    }

    fileRemove() {
        this.userProfile.click();
        this.profile.click();
        this.removeLink.click();
        this.saveChange.click();
        browser.pause(2000);
    }

    dateSet() {
        this.userProfile.click();
        this.profile.click();
        this.toggleButtonOn.click();
        this.setFirstDay.setValue('07/16/19');
        this.setLastDay.setValue('08/15/20');
        this.saveChange.click();
        browser.pause(5000);
    }

    dateSetRemove() {
        this.userProfile.click();
        this.profile.click();
        this.setFirstDay.clearValue();
        this.setLastDay.clearValue();
        this.toggleButtonOn.click();
        this.saveChange.click();
        browser.pause(5000);
    }

    dropdownSelection() {
        this.userProfile.click();
        this.profile.click();
        this.tabClick[4].click();
        this.ddlClick.click();
        this.weekSelection[2].click();
        this.checkboxSelection[0].click();
        browser.pause(5000);
    }
}

module.exports = ActivityPage;

Activity Test Case

var LoginPage = require('../pages/LoginPage.js');
var ActivityPage = require('../pages/Activity.js');
var data = require('../pages/data.json');

var login = new LoginPage();
var activity = new ActivityPage();
const assert = require('assert');


describe('Check asana login and other activities', function () {

    before(function () {
        login.open();
        login.login(data.username, data.password);
    });

    it('should upload the file', function () {
        activity.fileUpload1();
    });

    it('should remove the uploaded image', function () {
        activity.fileRemove();
        const title = browser.getTitle();
        assert.strictEqual(title, 'Home - Asana');
    });

    it('should set the date', function () {
        activity.dateSet();
        activity.dateSetRemove();
    });

    it('should select from ddl and the checkbox', function () {
        activity.dropdownSelection();
    });

    it('should create and search the task', function () {
        activity.taskCreation(data.taskname);
        activity.search(data.taskname);
    });
});

Hope you guys were able to get it working like a charm. You can get the source code from below repository.

GitHub link : https://github.com/thuvvashan20/WebdriverIO-Javascript

                                           Happy testing..!!!🐞🐞🐞🐞

References :

https://webdriver.io/docs/gettingstarted.html
https://webdriver.io/docs/clioptions.html