WebdriverIO How to implement Page Object Model
HTML-код
- Опубликовано: 6 авг 2024
- ALL FREE COURSES ► automationstepbystep.com/
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){
await this.username.setValue(username)
await this.password.setValue(password)
await this.loginButton.click()
}
async checkLoginMessage(message){
await expect(this.messageBox).toHaveTextContaining(message)
}
}
module.exports = new LoginPage();
Login test
const LoginPage = require('../pageobjects/login.page')
describe('Demo Test', () =＞ {
it('Login Test', async () =＞ {
browser.url('the-internet.herokuapp.com/lo...)
await LoginPage.login('tomsmith', 'SuperSecretPassword!')
await LoginPage.checkLoginMessage('You logged into a secure area!')
})
})
ASK RAGHAV ► bit.ly/2CoJGWf
CI CD DEVOPS
JENKINS BEGINNER ► bit.ly/2MIn8EC
JENKINS TIPS & TRICKS ►bit.ly/2LRt6xC
JENKINSFILE ► bit.ly/3JSMSZ7
DOCKER ► bit.ly/2MInnzx
KUBERNETES ► bit.ly/2MJIlMK
UI TESTING
SELENIUM BEGINNERS ► bit.ly/2MGRS8K
SELENIUM JAVA FRAMEWORK ► bit.ly/2N9xvR6
SELENIUM PYTHON ► bit.ly/2oyMp5x
SELENIUM TIPS ► bit.ly/2owxc50
SELENIUM BUILDER ► bit.ly/2MKNtlq
SELENIUM 4 ► bit.ly/3AiJOlP
KATALON STUDIO ► bit.ly/2wARFdi
ROBOT FRAMEWORK with RIDE ► bit.ly/2Px6Ue9
ROBOT FRAMEWORK with Eclipse► bit.ly/2N8DZxb
PROTRACTOR ► bit.ly/2KtqVkU
ACCELQ ► bit.ly/3PlsAsh
TEST PROJECT ► bit.ly/2DRNJYE
CUCUMBER BDD ► bit.ly/3Cnno4z
CYPRESS ► bit.ly/3PpEukM
XPATH & WEB LOCATORS ► bit.ly/3PpEvoQ
API TESTING
WEB SERVICES (API) ► bit.ly/2MGafL7
SOAPUI ► bit.ly/2MGahmd
POSTMAN ► bit.ly/2wz8LrW
POSTMAN 2022 ► bit.ly/3JWm4qX
JMETER API TESTING ► bit.ly/3AgVPar
GENERAL ► bit.ly/2PYdwmV
KATALON STUDIO API ► bit.ly/2BwuCTN
REST ASSURED ► bit.ly/3zUdhRD
KARATE API ► bit.ly/3w3H5Ku
API MOCKING ► bit.ly/3bYPsjS
IDE
Visual Studio Code ► bit.ly/2V15yvt
PROGRAMMING
JAVASCRIPT ► bit.ly/2KJDZ8o
TYPESCRIPT ► bit.ly/3dvJBmz
MOCK INTERVIEWS ► bit.ly/3QGwwVJ ▬▬
RAGHAV PAL
GITHUB PROJECTS ► github.com/Raghav-Pal/
STORIES BY RAGHAV ► automationstepbystep.com/stor...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
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
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 :)
Most welcome
Excellent video, man, very useful and straight to the point, thank you!
Most welcome Gabriel
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!
Glad it helped..
explained very nicely, thanks a lot!
Most welcome Floweenka
Excellent video with all coding explanation thank you
Most welcome Nikahat
Very helpful, thanks :)
Most welcome
Thank you so much Raghav!
Most welcome 🤗
Thx for the next part :)
Hope you enjoyed it
superb explanation sir
Thanks Sumit
Thank you Raghav for POM session.
Most welcome
great!
Thanks for watching Leo
Superb! Explanation Sir, But can u explain initial Plugins and settings are needed in Eclipse.Please Suggest to me.Thanks in advance
Hi Manish, on eclipse you will need *Eclipse Webdriver Plugin*
To install the Eclipse WebDriver plugin, open Eclipse and go to the "Help" menu. Select "Eclipse Marketplace" and search for "WebDriver." Click "Install" to install the plugin
Thanks a lot Sir, but can you give me more detail about Allure?
Allure is a powerful reporting library that integrates seamlessly with WebdriverIO to create beautiful and informative test reports. Let's dive into the details:
1. Installation:
- To use the Allure reporter with WebdriverIO, follow these steps:
- Add `@wdio/allure-reporter` as a devDependency in your `package.json`:
```json
{
"devDependencies": {
"@wdio/allure-reporter": "^7.0.0"
}
}
```
- Install it using:
```bash
npm install @wdio/allure-reporter --save-dev
```
2. Configuration:
- In your `wdio.conf.js` file, configure the output directory for Allure reports:
```javascript
export const config = {
// ...
reporters: [
['allure', {
outputDir: 'allure-results',
disableWebdriverStepsReporting: true,
disableWebdriverScreenshotsReporting: true,
}],
],
// ...
}
```
- The `outputDir` defaults to `./allure-results`.
- After a test run, you'll find an `.xml` file for each spec, along with other attachments like `.txt` and `.png` files in the specified directory.
3. Customization:
- You can further customize the Allure reporter using the following optional parameters:
- `disableWebdriverStepsReporting`: Set to `true` if you want to log only custom steps to the reporter.
- `issueLinkTemplate`: Specify the issue link pattern (e.g., `[4](example.org/issue/){}`).
- `tmsLinkTemplate`: Specify the Test Management System (TMS) link pattern (e.g., `[5](example.org/tms/){}`).
- `disableWebdriverScreenshotsReporting`: Set to `true` to exclude screenshots from the reporter.
- `useCucumberStepReporter`: Set to `true` when using Cucumber to adjust the report hierarchy.
- `disableMochaHooks`: Set to `true` to exclude before/after hooks from the Allure Reporter.
- `addConsoleLogs`: Set to `true` to attach console logs from steps to the reporter.
- `reportedEnvironmentVars`: Display environment variables in the report.
For more detailed documentation, you can refer to the official Allure Report Docs
.
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
Praba
I believe its not there as of now
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?
Hi
The error "selector needs to be typeof `string` or `function`" means that the selector that you are passing to the `WebDriverIO` API is not of the correct type. The selector needs to be either a string or a function.
Here are some possible solutions to this error:
* **Make sure that the selector is a string.** If the selector is a string, make sure that it is enclosed in quotes. For example, the following selector is a string: `"#username"`.
* **Make sure that the selector is a function.** If the selector is a function, make sure that it returns a string. For example, the following function is a selector: `function(el) { return el.querySelector("#username"); }`.
* **Use the `By` class to create a selector.** The `By` class provides a number of static methods that you can use to create selectors. For example, the following code uses the `By.cssSelector()` method to create a selector: `By.cssSelector("#username")`.
Here is an example of how to bypass the error "selector needs to be typeof `string` or `function`" in WebDriverIO:
```python
import webdriverio
def login(driver):
# Get the username input field.
username_input = driver.findElement(By.cssSelector("#username"))
# Enter the username.
username_input.sendKeys("admin")
# Get the password input field.
password_input = driver.findElement(By.cssSelector("#password"))
# Enter the password.
password_input.sendKeys("password")
# Click the login button.
driver.findElement(By.cssSelector("#login")).click()
if __name__ == "__main__":
driver = webdriverio.webdriver.Chrome()
login(driver)
driver.quit()
```
This code will first get the username input field and then enter the username. Then, it will get the password input field and then enter the password. Finally, it will click the login button.
I hope this helps
Hello , Cant we use xpath locator in webdriver IO . am getting Unexpected token error in IDE
Hi Saranya
WebDriverIO does support XPath locators for finding elements on a web page.
If you are getting an "Unexpected token" error in your WebDriverIO IDE, it might be due to a syntax issue in your code. Make sure you are using the correct syntax for XPath locators.
Here's an example of how to use XPath locator in WebDriverIO:
```javascript
// Import WebDriverIO and set up browser configuration
const { remote } = require('webdriverio');
const options = {
capabilities: {
browserName: 'chrome',
},
};
// Start a WebDriverIO session
(async () => {
const browser = await remote(options);
try {
// Navigate to a web page
await browser.url('www.example.com');
// Using XPath to locate an element and perform an action
const submitButton = await browser.$('//input[@type="submit"]');
await submitButton.click();
// More actions and assertions can be performed here
} catch (error) {
console.error('Error occurred:', error);
} finally {
// Close the WebDriverIO session
await browser.deleteSession();
}
})();
```
In the above example, we use the XPath `//input[@type="submit"]` to locate a submit button on the web page. The XPath syntax is correct, and WebDriverIO should be able to execute it without any issues.
If you are still facing issues, please ensure that your XPath expression is correct, and there are no syntax errors in your code. Also, double-check if all the required dependencies are installed in your project, and WebDriverIO is properly configured
@@RaghavPal No Sir. Its not accepting anything other than CSS . I tried XPath, Name .. Getting error for other than CSS . Is this releated to ES versions
ok, will need to check more on this online
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
🙏🙏🙏🙏🙏🙏🙏🙏🙏
Hi Hrushi,
this is great to know that you have started at an early age.
I will plan to create WebdriverIO videos with TypeScript
@@RaghavPal Thank You sir for your love. Please make it as soon as possible. I will be waiting for your tutorials which makes the students like me brighter and efficient in coding.
Thank you......
sir i why is my testscript getting skipped please help
Hi Nitin
There are a few reasons why your test script might be getting skipped in WebDriverIO. Here are some of the most common reasons:
* **The test is marked as skipped.** You can mark a test as skipped by using the `it.skip()` or `describe.skip()` method. This will cause the test to be skipped, and it will not be executed.
* **The test is not defined.** If the test is not defined, it will be skipped. This can happen if you have a typo in the test name, or if you have deleted the test from your code.
* **The test is not enabled.** You can enable or disable tests by using the `it.enabled()` or `describe.enabled()` method. If a test is disabled, it will be skipped.
* **The test is not applicable.** If a test is not applicable to the current environment, it will be skipped. This can happen if you are running the test on a different browser or platform than the one that the test was written for.
To figure out why your test script is getting skipped, you can use the `debugger` command in WebDriverIO. This will stop the execution of the test script, and you can inspect the variables and the code to see why the test is being skipped.
Here are some additional tips for debugging skipped tests in WebDriverIO:
* **Use the debugger.** The debugger can be a great way to debug skipped tests. You can use the debugger to inspect the variables and the code to see why the test is being skipped.
* **Check the test code.** Make sure that the test code is valid and that it is not marked as skipped.
* **Check the environment.** Make sure that the test is being run on the correct environment.
* **Check the logs.** The logs can often provide clues as to why a test is being skipped.
I hope this helps!
Thanks sir I will check ur sessions are awesome enjoying learning with your vedio thanks a lot for this
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.
[0-0] Spec file(s): file:///C:/Users/VSG/Desktop/WebDriverIO/WebDriverIO_Project_1/test/specs/loginpotest.js
Raveena
The error you're encountering with WebDriverIO suggests that the `browser` object is being used before it's fully initialized. This typically happens when commands that rely on the `browser` object are placed outside of test hooks (`before`, `beforeEach`, `after`, `afterEach`) or test blocks (`it`).
Here's what you can do to resolve this issue:
1. Move any setup code that uses the `browser` object into the `before` or `beforeEach` hooks. This ensures that the `browser` object is fully initialized before any commands are called.
2. Ensure that your spec file and the respective page file are kept in a similar folder structure to avoid path-related issues
3. Check your imports and remove any that are not necessary, as unwanted imports can sometimes cause issues
Here's an example of how you might structure your code:
```javascript
describe('Login Page Test', () => {
before(() => {
// Initialization code that needs to run before the spec file is executed
browser.url('your_login_page_url');
});
it('should allow a user to log in', () => {
// Your test code here
});
// ... other hooks and test blocks
});
```
Make sure that any command that interacts with the `browser` object is within an `it` block or appropriate hooks. If you follow these steps and the issue persists, it could be helpful to look at the specific code in your `loginpotest.js` file to identify any commands that might be incorrectly placed outside of test blocks or hooks.
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.
[0-0] Spec file(s): file:///C:/Users/VSG/Desktop/WebDriverIO/WebDriverIO_Project_1/test/specs/loginpotest.js
Hi, pls check this - stackoverflow.com/questions/63589090/webdriver-io-unable-to-load-spec-files-quite-likely-because-they-rely-on-brow
@@RaghavPal it did not fix my issue
Ready, I could solve it this way. It worked for me. Just in case, make a backup because it will modify the node_modules and wdio.conf.js => Add the commands npm i --save-dev @wdio/cli
npx wdio config -y
I hope this is useful, regards.
@@Rohit-ez7pf Ready, I could solve it this way. It worked for me. Just in case, make a backup because it will modify the node_modules and wdio.conf.js => Add the commands npm i --save-dev @wdio/cli
npx wdio config -y
I hope this is useful, regards.
@@damidelOK Thank you brother 🤝