Getting Started with WebdriverIO | Complete Tutorial for Beginners Step by Step

ALL FREE COURSES ► https://automationstepbystep.com/
QUIZ - https://forms.gle/5AymstwdWxXhCipw7
00:00 Introduction
01:18 What is WebdriverIO
02:02 Features of WebdriverIO
03:30 Software and Hardware Requirements
06:24 How to install Nodejs on windows os
14:27 IDE (Visual Studio Code)
Project Setup
16:35 Create a new folder and open in IDE (VS Code)
19:57 Open terminal and run command npm init -y
23:14 Install webdriverio using command npm init wido and select options as needed
29:27 Webdriverio configuration file wdio.conf.js
31:12 Check webdriverio version npm ls webdriverio
31:51 How to run tests in webdriverio project
npx wdio run wdio.conf.js
npm run wide
To run specific tests npx wdio run wdio.conf.js --spec example.spec.js
35:30 How to create tests in webdriverio project
48:07 How to create allure reports in webdriverio project
56:25 Outro

What is WebdriverIO
Automation testing framework for browser and mobile testing
Free & Open-source
owned by a non-profit entity called OpenJS Foundation

Features
We can use WebdriverIO to automate:
🌐 modern web applications written in React, Vue, Angular etc
📱 hybrid or native mobile apps running on emulator/simulator or real device
💻 native desktop applications (e.g. written with Electron.js)
Can work with Shadow DOM and React Objects

Hardware & Software Requirements
Hardware
Desktop or Laptop with min 4GB RAM, 5 GB free space
Software
Node JS - v12.16.1 or higher
IDE (for JavaScript)
VS Code -    • Visual Studio Code  

Project Setup & WebdriverIO Installation
Step 1 - Create a new folder and open in IDE (VS Code)
Step 2 - Open terminal in VS Code and run commands npm init -y
npm init wdio
Step 3 - Select the options as required and install
Step 4 - Check WebdriverIO version npm ls webdriverio
Step 5 - Check wdio.conf.js file and project folders are created
Step 6 - To run existing tests
Run all tests in the folder configured in wdio.conf.js
npx wdio run wdio.conf.js
or
npm run wdio
Run specific tests npx wdio run wdio.conf.js --spec test1.js

How to create Tests
Step 1 - Create a new file under spec folder
Step 2 - Add the test script using it block (mocha)

describe('Demo Tests', () =＞ {
it('My 1st Test', async () =＞ {
browser.url('https://google.com/')
browser.pause(2000)
await $('[name="q"]').setValue("WebdriverIO");
await $('button[type="submit"]').click();
browser.keys('Enter')
})
})

$() Single dollar sign to find a single web element
$$() Double dollar sign to find multiple web elements

How to Generate and View Reports

Step 1 - Run - npm install @wdio/allure-reporter --save-dev
Step 2 - Add reporter config in wdio.conf.js
Step 3 - Run test and check Allure Results folder is generated
Step 4 - Install allure command line tool npm install -g allure-commandline --save-dev
Step 5 - Run commands
allure generate allure-results // this will generate allure-report folder
allure open // will start server and open report

#webdriverio
Refer - https://webdriver.io/docs/allure-repo...

GitHub Project - https://github.com/Raghav-Pal/Webdriv...

ASK RAGHAV ► https://bit.ly/2CoJGWf
STORIES BY RAGHAV ► https://automationstepbystep.com/stor...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Every LIKE & SUBSCRIPTION gives me great motivation to keep working for you

You can support my mission for education by sharing this knowledge and helping as many people as you can
If my work has helped you, consider helping any animal near you, in any way you can

NEVER STOP LEARNING
Raghav Pal