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

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
31:12 Check webdriverio version *npm ls webdriverio*
31:51 How to run tests in webdriverio project
*npm run wide*
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
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)

*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 6 - To run existing tests
or
npm run wdio

*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 () =＞ {
await $('[name="q"]').setValue("WebdriverIO");
await $('button[type="submit"]').click();
})
})

$() 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 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

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

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

[SB-hbkx]

Best Wdio video tutorial seen so far. Crisp clear and simple. 🙂

[Anishkcs]

Hello Raghav, that was a great learning session, thank you. Awaiting for your next session on POM, assertions, reading data from file and more.

[ooozzzoo]

hello Ragnav! it is pleasure to watch content with high quality

[TS-]

Super clear, Raghav. Many thanks for this supercool learning video.

[carlirowsperrirow]

this is the best tutoerial i've seen on this subject, thank you so much, i would have saved a lot of time only if I new about your videos, you're the best!!!

[fazlesaifullah]

Hey Raghav, the way you present and teach is amazing. Keep the videos coming. Thnaks

[TheShubham]

If you are unable to install the webdriverio using "npm init wdio" follow these steps

1) Check if your npm is installed globally if not use command
npm install -g npm
2) Use this to clean the cache related problems
npm cache clean --force
3) Set your global variables properly as described in video.
4) Run
npm init -y
5) Run
npm init wdio --legacy-peer-deps

Select less packages/dependencies so that the installation does not fail due to any extra packages that are not crucially required.

[TheSrinathmulugund]

Hello Raghav, I liked the way you demonstrated the concept and took in a very simple manner. Thanks for this video..

[HK-tpic]

Just a crisp and clear session and all required info, Thank you!

[alonzoharris]

Thanks so much for such a kind job, sir! It was so perfect and productive explanation for beginners!

[ramkumarloganathan]

Great Work sir! Thanks for sharing the knowledge to others, I am able to understand very easily from your tutorial🙏

[einstein]

Thank you so much. You helped me for pass test task

[xXMrThomasXx]

Great Tutorial, step by step, really good job :)

[jeongyeollee]

Wow!! Now you created! It's so wonder tool that I really want. Thanks!

[tamilarasisasikumar]

Hello Raghav, Great session! I am looking for the complete framework setup Hope you'll cover everything Thank you so much.

[tejastej]

superb sir nice explaining thanks for the content 😇

[СергейВинтерман]

Brilliant as always, thank you so much

[TejaswiniBoyenapally]

Hai Raghav, I was struck at "Do you want add a service to your test setup?"
I am not getting Chrome driver or edge driver.
Can you pls help me to continue.
Thanks

[amit]

Hi Raghav, i have setup webdriverio in mac i found the error "Could not execute "run" due to missing configuration, file
".wdio[.js/.ts]" not found!"

[heavenworld]

How to make project like POM pattern? Have any other pattern in this framework?