WebdriverIO How to implement Page Object Model

[@einstein6451]

Thank you so much Raghav!

[@RaghavPal]

Most welcome 🤗

[@sumit44442]

superb explanation sir

[@RaghavPal]

Thanks Sumit

[@manishkannamoney7455]

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

[@RaghavPal]

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

[@prabakarann2644]

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

[@RaghavPal]

Praba I believe its not there as of now

[@saranyababu1359]

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

[@RaghavPal]

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

[@saranyababu1359]

@@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

[@RaghavPal]

ok, will need to check more on this online

[@Slitek1]

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 :)

[@RaghavPal]

Most welcome

[@leoamato6113]

great!

[@RaghavPal]

Thanks for watching Leo

[@NITINN-ne9ze]

sir i why is my testscript getting skipped please help

[@RaghavPal]

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!

[@nitinshiva6868]

Thanks sir I will check ur sessions are awesome enjoying learning with your vedio thanks a lot for this

[@tuangkarombang5315]

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

[@RaghavPal]

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 .

[@xXMrThomasXx]

Thx for the next part :)

[@RaghavPal]

Hope you enjoyed it

[@cuckoophilip6275]

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?

[@RaghavPal]

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

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

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!

[@RaghavPal]

Glad it helped..

[@gabrielmarques-qx1xk]

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

[@RaghavPal]

Most welcome Gabriel

[@Floweenka]

explained very nicely, thanks a lot!

[@RaghavPal]

Most welcome Floweenka

[@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. [0-0] Spec file(s): file:///C:/Users/VSG/Desktop/WebDriverIO/WebDriverIO_Project_1/test/specs/loginpotest.js

[@RaghavPal]

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.

[@NikahatFatima-o2k]

Excellent video with all coding explanation thank you

[@RaghavPal]

Most welcome Nikahat

[@hrushitelugu-techlogics5334]

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 🙏🙏🙏🙏🙏🙏🙏🙏🙏

[@RaghavPal]

Hi Hrushi, this is great to know that you have started at an early age. I will plan to create WebdriverIO videos with TypeScript

[@hrushitelugu-techlogics5334]

@@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......

[@Anishkcs]

Thank you Raghav for POM session.

[@RaghavPal]

Most welcome

[@jollywgiant1760]

Very helpful, thanks :)

[@RaghavPal]

Most welcome

[@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. [0-0] Spec file(s): file:///C:/Users/VSG/Desktop/WebDriverIO/WebDriverIO_Project_1/test/specs/loginpotest.js

[@RaghavPal]

Hi, pls check this - stackoverflow.com/questions/63589090/webdriver-io-unable-to-load-spec-files-quite-likely-because-they-rely-on-brow

[@Rohit-ez7pf]

@@RaghavPal it did not fix my issue

[@AoseiOK]

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.

[@AoseiOK]

@@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.

[@Rohit-ez7pf]

@@AoseiOK Thank you brother 🤝