WebdriverIO How to implement Page Object Model

00:00 Intro
00:46 What is Page Object Model
03:04 Advantages of POM
03:22 DEMO How to implement POM in WebdriverIO Project
03:49 Sample demo application for testing
04:23 Sample Login test
16:20 Run demo test
16:54 Start of Page Object Model Implementation
17:08 Create class for each page
18:26 Create object locators in the login page class
21:24 Create functions for action on the objects
26:56 Refer the class in test script
30:30 Run POM test
33:06 Outro

*What is POM*
Design pattern to create Object Repository
A class is created for each page to identify web elements of that page
Also contains methods to do action on the objects
Separates test objects and test scripts

*Advantages of POM*
Makes code maintainable
Changes and updates are easier
Makes code reusable
Improves readability
Single Object Repository
Saves time and efforts
Avoid rework
Makes tests less brittle
New tests creation is easier and faster
Improves Overall quality and efficiency

Demo
How to implement Page Object Model
Step 1 - Create a class for each page
Step 2 - Create locators of all objects to be used in that page
Step 3 - Create methods or actions to be performed on the objects
Step 4 - Refer in the test scripts
Step 5 - Run and validate

class LoginPage

class LoginPage {
get username(){
return $('#username')
}
get password(){
return $('#password')
}
get loginButton(){
return $('button[type="submit"]')
}
get messageBox(){
return $('#flash')
}
async login(username, password){
}
async checkLoginMessage(message){
}
}

Login test

describe('Demo Test', () =＞ {
it('Login Test', async () =＞ {
})
})

*CI CD DEVOPS*

*UI TESTING*

*API TESTING*

*IDE*

*PROGRAMMING*

*RAGHAV PAL*

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

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

[Slitek]

Hi, I am not writing comments too often but for Your work - I have to do this. Thank You for the genious explanation of all steps, can't wait for more materials from You regarding to webdriverio. Just please - don't stop this work :)

[МаринаК-ыю]

Thank s a lot! Your video helped me to understand what is POM, how to implement it and why it is useful! Thank you again!

[gabrielmarques-qxxk]

Excellent video, man, very useful and straight to the point, thank you!

[NikahatFatima-ok]

Excellent video with all coding explanation thank you

[hrushitelugu-techlogics]

hi Raghav sir,
I am Hrushikesh studying in class 9th. I am a great admirer of your classes. Now I am learning webdirverio. But I wish to learn it with typescript without using javascript. please can you provide the video tutorial to set up a frame work to test a web application using webdriver and typescript compiler but not javascript.
Please
Please
🙏🙏🙏🙏🙏🙏🙏🙏🙏

[prabakarann]

Hello sir ... do we have any video that support/handles POM when we have cucumber Stepdefenitions already in place ...?

if so, pls share the link here sir

[manishkannamoney]

Superb! Explanation Sir, But can u explain initial Plugins and settings are needed in Eclipse.Please Suggest to me.Thanks in advance

[tuangkarombang]

Thanks a lot Sir, but can you give me more detail about Allure?

[saranyababu]

Hello, Cant we use xpath locator in webdriver IO . am getting Unexpected token error in IDE

[cuckoophilip]

Hi Raghav,
When I run the login test, I get the error "selector needs to be typeof `string` or `function`". Could you please suggest how to bypass it?

[NITINN-neze]

sir i why is my testscript getting skipped please help

[risbudtejas]

Hi Raghav, when I try to use await logged into a secure area!')
I get an error in the terminal is not a function
I could not find any solution to this. If you could help me out please. Thanks

[RaveenaSingal]

Please help me to resolve this issue

ERROR @wdio/runner: Error: Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.
[0-0] `browser` object has only `capabilities` and some flags like `isMobile`.
[0-0] Helper files that use other `browser` commands have to be moved to `before` hook.

[TheVihangasathsara]

Please help me to resolve this issue 🙏🙏

ERROR @wdio/runner: Error: Unable to load spec files quite likely because they rely on `browser` object that is not fully initialised.
[0-0] `browser` object has only `capabilities` and some flags like `isMobile`.
[0-0] Helper files that use other `browser` commands have to be moved to `before` hook.