WebdriverIO How to Record and Generate Test Scripts
HTML-код
- Опубликовано: 6 авг 2024
- ALL FREE COURSES ► automationstepbystep.com/
ASK RAGHAV ► bit.ly/2CoJGWf
How to RECORD WebdriverIO Test
Chrome DevTools Recorder - If you are using latest chrome you will have the Recorder already installed and available This feature is available only in Chrome, not Chromium
Step 1 - Open any website, do a Right-Click and select "Inspect"
Step 2 - To open Recorder panel -
Click on More options ＞ More tools ＞ Recorder
OR Click on More options ＞ Run Command ＞ Show Recorder
Step 3 - Click on "Start new recording" - give your test a name and then use the browser to record test
Step 4 - Stop recording & click on "Replay" to check if the recording was successful
Step 5 - Can Slowdown replay | Simulate network | Measure performance | Add Remove Edit steps | Edit locators
Step 6 - Can import | export steps
Step 7 - Can export for different tools using their chrome plugins - e.g.
Cypress Chrome Recorder | Nightwatch Chrome Recorder | Webdriver IO Chrome Recorder
Ref - goo.gle/recorder-extension
#webdriverio
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
MOBILE TESTING
APPIUM ► bit.ly/2ZHFSGX
MOBILE TESTING ►bit.ly/2PxpeUv
PERFORMANCE TESTING
JMETER BEGINNER ► bit.ly/2oBbtIU
JMETER INTERMEDIATE ► bit.ly/2oziNVB
JMETER ADVANCED ► bit.ly/2Q22Y6a
JMETER TIPS & TRICKS ► bit.ly/2NOfWD2
PERFORMANCE TESTING ► bit.ly/2wEXbLS
GATLING ► bit.ly/3QrWfkV
IDE
ECLIPSE ► bit.ly/3AnRhQP
INTELLIJ IDEA ► bit.ly/3AnyDZ8
Visual Studio Code ► bit.ly/2V15yvt
PROGRAMMING
JAVA BEGINNERS ► bit.ly/2PVUcXs
JAVA TIPS & TRICKS ► bit.ly/2CdcDnJ
GROOVY ► bit.ly/2FvWV5C
JAVASCRIPT ► bit.ly/2KJDZ8o
TYPESCRIPT ► bit.ly/3dvJBmz
PYTHON ► bit.ly/2Z4iRye
RUBY ► bit.ly/3JRRmzf
BUILD TOOLS
MAVEN ► bit.ly/2NJdDRS
GRADLE ► bit.ly/30l3h1B
SOURCE CODE MANAGEMENT
GIT & GITHUB ►bit.ly/2Q1pagY
GITLAB ► bit.ly/2kQPGyQ
CLOUD SERVICES
BROWSERSTACK ► bit.ly/3w7kxZn
SAUCELABS ► bit.ly/3w7kAo1
LAMBDATEST ► bit.ly/3C6TBwM
MOCK INTERVIEWS ► bit.ly/3QGwwVJ ▬▬
UDEMY ► www.udemy.com/user/raghav-pal-3/
GITHUB PROJECTS ► github.com/Raghav-Pal/
STORIES BY RAGHAV ► 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
This was a new learning and it is interesting for quick automation solution.
Glad this helped
Many thanks. That was, again, a great video.
Most welcome
This is a very interesting tool, thank you!
You are welcome!
You are awesome!!! Thank you very much.
You're welcome!
Really helpful thanks
Most welcome
Super.. I learnt new trick here..thank you brother
Most Welcome. keep learning..
thanks a lot great source to learn
You are welcome Nitin
Hello Raghav,
Thank you for the explanation.
When I tried the same, the tests are generated in 'describe' and 'it' format which is for the Mocha framework.
It would be great if you cloud let me know if the recording can be used with WDIO cucumber framework to record the steps.
Hi Nandan
Install the "WebdriverIO Test Recorder" Chrome extension.
Open your application in the Chrome browser.
Click on the extension icon and start recording your interactions.
Once you have recorded your test script, click on the "Export" button.
Select "WebdriverIO" as the export format and copy the generated code.
Paste the generated code into your WebdriverIO test script.
Run the test script using WebdriverIO's Cucumber framework.
So once I get that webdriverio .js file, can I go to LambdaTest and upload it and run the test there ? Does LambdaTest support that, or do I have to use Selenium for example ?
this can help webdriver.io/docs/wdio-lambdatest-service/
Hi Raghav,
Is there a way to write a script to click on position of the screen, not the text? I have to submit carts, so each time one gets submitted, the cart which I clicked on is no longer available... so the script needs to run on "the next available" cart... Can you tell me how to do that please?
Andra
To click on a specific position of the screen using WebdriverIO, you can utilize the `browser.elementIdClick` command. This command requires the element ID of the element you want to click on. However, since the element IDs of the carts might change after each click, you'll need to dynamically identify the element to be clicked.
Here's an approach to tackle this scenario:
1. **Locate the cart elements:** Use a CSS selector or XPath to locate all the cart elements that are currently displayed on the page.
2. **Identify the next available cart:** Iterate through the located cart elements and check if they are available or not. You can check for availability based on attributes, such as a disabled button or a specific text indicating availability.
3. **Click on the next available cart:** Once you've identified the next available cart, use its element ID with the `browser.elementIdClick` command to click on it.
Here's an example code snippet that demonstrates this approach:
```javascript
const {test, expect} = require('@playwright/test')
test('Click on next available cart', async ({page}) => {
// Assuming you have located cart elements using a CSS selector or XPath
const cartElements = await page.$$('.cart-element');
// Iterate through cart elements and identify the next available cart
let nextAvailableCart;
for (const cartElement of cartElements) {
// Check if the cart is available based on attributes, such as a disabled button or a specific text indicating availability
if (isCartAvailable(cartElement)) {
nextAvailableCart = cartElement;
break;
}
}
// Click on the next available cart
if (nextAvailableCart) {
const cartElementId = await nextAvailableCart.getAttribute('id');
await page.elementIdClick(cartElementId);
} else {
console.error('No available carts found');
}
})
```
In this example, `isCartAvailable` is a function that determines whether a cart element is available or not. You'll need to implement the logic for this function based on the specific attributes or indicators that represent cart availability on your website.
Can we perform this automation for an OTT platform???
Kaanchan
Yes, WebdriverIO can be used to automate an OTT platform. WebdriverIO is a next-generation browser and mobile automation test framework for Node.js. It is built on top of the WebDriver protocol and provides a simple and intuitive API for writing automated tests.
To automate an OTT platform using WebdriverIO, you will need to:
1. Install WebdriverIO and its dependencies.
2. Create a new WebdriverIO project.
3. Write your automated tests.
4. Run your tests.
Here is a simple example of a WebdriverIO test that automates a login scenario on an OTT platform:
```javascript
const { browser } = require('webdriverio');
describe('OTT Platform Login Test', () => {
it('should be able to login to the OTT platform', async () => {
await browser.url('example.com/ott');
await browser.findElement('name=username').setValue('johndoe');
await browser.findElement('name=password').setValue('password');
await browser.findElement('css selector=button[type="submit"]').click();
// Assert that the user is logged in
await browser.pause(5000);
expect(await browser.findElement('css selector=h1').getText()).toEqual('Welcome, John Doe!');
});
});
```
To run this test, you can use the following command:
```
webdriverio test
```
This will start a browser and run the test. If the test passes, you will see a message like this:
```
✔ OTT Platform Login Test
✓ should be able to login to the OTT platform (5s)
```
If the test fails, you will see a message like this:
```
✖ OTT Platform Login Test
✕ should be able to login to the OTT platform (5s)
```
WebdriverIO provides a number of features that make it well-suited for automating OTT platforms, including:
* Support for a wide range of browsers and devices
* Support for parallel execution of tests
* Support for reporting and logging
* A large and active community
If you are looking for a powerful and flexible automation framework for your OTT platform, WebdriverIO is a great choice.
hi sir where will i get the exporter extension when i click on the dropdown button i dont see the list it says add extension.
Hi Nitin
will need more details or point to the part of the video you are referring to
Hi Raghav, I need to compare text with the getText() on an element. How can we achieve this. I tried with expect but somehow it was not working
Hi Bharath,
You can use the expect() function from the @wdio/jasmine-framework package to assert that the text from the element matches the expected text. Eg:
const expectedText = 'Hello World!';
const element = $('css selector for the element');
const actualText = await element.getText();
expect(actualText).toEqual(expectedText);
Make sure to replace 'css selector for the element' with the actual selector for the element you want to extract the text from.
@@RaghavPal Thanks Raghav, I'm able to get it work using toBe() method.
await expect(actualtext).toBe(expectedText)
Great tutorial! Can you have this generate the test cases in cucumber as well?
Yes, we can
@@RaghavPal thank you for the response. How are we able to? Just search for the cucumber extension?
Yes, you can just search for the cucumber extension in WebdriverIO. To do this, open your WebdriverIO project in your IDE and open the `wdio.conf.js` file. In the `wdio.conf.js` file, add the following code:
```
plugins: ['cucumber'],
```
This will tell WebdriverIO to use the Cucumber extension. You can also specify the version of the Cucumber extension that you want to use. For example, to use the latest version of the Cucumber extension, you would add the following code to the `wdio.conf.js` file:
```
plugins: ['cucumber@latest'],
```
Once you have added the Cucumber extension to your WebdriverIO project, you can start writing your cucumber tests. Cucumber tests are written in a special language called Gherkin. Gherkin is a plain text language that is easy to read and write.
Here is an example of a cucumber test:
```
Feature: Login
Scenario: Login with valid credentials
Given I am on the login page
When I enter my username and password
And I click on the login button
Then I should be logged in
```
This cucumber test will login to a website with valid credentials. The `Feature` keyword defines the name of the feature. The `Scenario` keyword defines a scenario within the feature. The `Given` keyword defines a precondition for the scenario. The `When` keyword defines an action that is performed. The `And` keyword is used to chain multiple actions together. The `Then` keyword defines an expected result.
You can learn more about Cucumber and Gherkin by visiting the Cucumber website: cucumber.io/.
Raghav, how can we allow WebDriverIO to stop closing browser after first test in a suite, I wanted to continue the next test case on same browser.
For example login in first case and then continue next test case on the same browser after login
Hi Bharath,
To allow WebDriverIO to continue to the next test case on the same browser, you need to configure the persistentSession option in your wdio.conf.js file.
Here's how you can set the persistentSession option to true:
/*
exports.config = {
// ... other configuration options
services: ['selenium-standalone'],
capabilities: [{
browserName: 'chrome',
'goog:chromeOptions': {
args: ['--no-sandbox']
}
}],
persistentSession: true,
// ... other configuration options
};
*/
This will allow WebDriverIO to reuse the same browser session between test cases. The browser will not be closed after the first test case, and the next test case will continue on the same browser with the same session state.
Note that this is different from using a single browser instance for all test cases in the suite, which is possible by using maxInstances configuration
@@RaghavPal thank you sir this is what I looking for
how to see another 4 videos in WebdriverIO playlist?
They are in processing, will be published soon
Usefull but I must refactor record script because it is not working on the begining. I should training this. I think. Thank you for the tutorial :) I don`t know about this extension.
Yes, can improve and update as per your needs
@@RaghavPal Yes, thats true
I added webdriverio extention, but cannot see it under export dropdown. I see "Export Via Extensions" and "Get Extentions", but not webdriverio. Why is it that?
Hi
There are a few reasons why you might not see the WebdriverIO extension under the export dropdown in the Chrome DevTools Recorder.
* **The extension is not installed.** Make sure that you have installed the WebdriverIO extension from the Chrome Web Store.
* **The extension is not enabled.** Once you have installed the extension, you need to enable it by clicking on the three dots in the top right corner of the Chrome DevTools window and selecting "More Tools" > "Extensions." Find the WebdriverIO extension in the list of extensions and make sure that the "Enabled" checkbox is checked.
* **The extension is incompatible with your version of Chrome.** The WebdriverIO extension is only compatible with certain versions of Chrome. Make sure that you are using a supported version of Chrome.
If you have checked all of these things and you still don't see the WebdriverIO extension under the export dropdown, then you can try the following:
* **Restart Chrome.** Sometimes a simple restart can fix problems with extensions.
* **Clear the Chrome browser cache.** This will remove any temporary files that might be causing problems with the extension.
* **Reinstall the extension.** If all else fails, you can try uninstalling and reinstalling the extension.
If you are still having problems, you can contact the WebdriverIO support team for help.
Here are some additional steps you can take to troubleshoot the issue:
1. Open the Chrome DevTools and go to the Sources panel.
2. Click on the "Network" tab and filter the requests by "WebdriverIO".
3. Make sure that the extension is making requests to the WebdriverIO server.
4. If the extension is not making requests to the server, then the extension is not installed or enabled correctly.
5. If the extension is making requests to the server, but you still don't see the "Export as a WebdriverIO Test Script" option, then there may be a problem with the extension itself. You can try reinstalling the extension or contacting the extension developer for help.
@@RaghavPal Many thanks for this detailed answer. I really appreciate that. 🙏
@@RaghavPal I was AFK. Now, "Reinstall the extension" option worked perfectly. Thanks so much again.
Hi, where did you get the base code?
If you are talking about the setup, can check the earlier sessions
Is it possible to automate Flipkart login using webdriverio ?
Hi Amal
Yes, it is possible to automate Flipkart login using WebDriverIO. See this example:
const assert = require('assert');
describe('Flipkart Login', () => {
it('should log in with valid credentials', () => {
browser.url('www.flipkart.com/account/login');
// Enter the email address
const emailInput = $('input[type="text"]');
emailInput.setValue('youremail@example.com');
// Enter the password
const passwordInput = $('input[type="password"]');
passwordInput.setValue('yourpassword');
// Click on the Login button
const loginButton = $('button[type="submit"]');
loginButton.click();
// Verify that the user has been logged in
const myAccountLink = $('._2aUbKa');
assert(myAccountLink.isDisplayed());
});
});
Hi Raghav, can you please let me know how to perform rightClick using WebDriverIO
Hi Bharath,
Here is an example of how you can use the rightClick() command to perform a right-click on an element:
/*
// Import the browser object
const browser = require('webdriverio').remote({
desiredCapabilities: {
browserName: 'chrome'
}
})
// Navigate to a website
browser.url('www.example.com')
// Locate the element you want to right-click on
const element = browser.$('#elementId')
// Perform a right-click on the element
element.rightClick()
*/
@@RaghavPal Thank you Raghav, for sharing the code. I'm getting this error while running it: Can you please help.
TypeError: browser.url is not a function
Raghav, I'm able to get it working. I tried this.
await element.click({button:right})
How can we have access to the other 4 videos that are hidden ??
They are in processing, will be public soon
Hi, When i try to export i do not see the any option of extension which i have added
Advaith
I will need more information and details
If it's about test script
To export a test script with WebdriverIO, you can use the `testrunner.export()` command. This command takes an object as its argument, which specifies the options for the export.
The object that you pass to the `testrunner.export()` command can include the following properties:
* `output`: The path to the output file.
* `format`: The format of the output file.
* `options`: An object that contains any additional options for the export.
For example, to export a test script to a JavaScript file called `test.js`, you would use the following code:
```
const testrunner = require('webdriverio/testrunner');
testrunner.export({
output: './test.js',
format: 'javascript',
});
```
If you have added an extension to your WebdriverIO project, you can export a test script to the extension by specifying the extension's name in the `output` property. For example, to export a test script to the `my-extension` extension, you would use the following code:
```
const testrunner = require('webdriverio/testrunner');
testrunner.export({
output: './my-extension/test.js',
format: 'javascript',
});
```
If you are not seeing the extension in the `output` property, it is possible that the extension is not installed correctly. Make sure that you have installed the extension and that it is listed in the `package.json` file for your WebdriverIO project
@@RaghavPal Like when I add the extension and open the recording and try to export I don't see the webdriverio extension to export.
Can we use the same test case for the mobile app, will the test case work.
Whether or not a web test created using WebDriverIO for desktop browsers will work for mobile apps depends on a few factors, including:
* The type of mobile app being tested. Is it a native app, a hybrid app, or a web app?
* The specific tests being performed. Some tests, such as functional tests, may be more portable than others, such as performance tests.
* The underlying framework being used to run the tests. WebDriverIO supports cross-platform testing, but some additional configuration may be required for mobile apps.
In general, it is possible to use the same test case for both desktop browsers and mobile apps, but it is important to be aware of the potential differences and to make necessary adjustments.
Here are some tips for using the same web test case for desktop browsers and mobile apps:
* Use a cross-platform testing framework, such as WebDriverIO.
* Use generic selectors whenever possible, instead of selectors that are specific to a particular browser or device.
* Be aware of the differences in screen size and resolution between desktop browsers and mobile devices.
* Use mobile-specific features, such as touch events and device orientation, when necessary.
* Test your test cases on a variety of mobile devices to ensure compatibility.
If you are unsure whether or not a particular test case will work for mobile apps, it is always best to test it on a real device.
Here are some additional things to keep in mind:
* Mobile apps may have different performance characteristics than desktop browsers. For example, mobile apps may have slower network connections or less powerful processors.
* Mobile apps may also have different accessibility requirements than desktop browsers. For example, mobile apps may need to be tested with screen readers or other assistive technologies.
It is important to tailor your test cases to the specific mobile app that you are testing and to the needs of your users.
@@RaghavPal I totally understand, is there any way to generate the test case for native apps, could you suggest me how to write a test case for a particular scenario, for example for capture video or photo, is there any standard way for writing test cases for the components.
i am unable to export my recording to webdriverio
Sakshi
will need more details and context. Can you tell me the steps you followed and where exactly you are facing issue
@raghav I have added chrome extension for webdriverio , but still cannot export as webdriverio test script. also in my package.json I see only the following
"name": "webdriverio-test",
"version": "0.0.0",
"description": "WebdriverioTest",
"main": "server.js",
"author": {
"name": ""
},
"devDependencies": {
"@wdio/cli": "^8.16.20",
"@wdio/cucumber-framework": "^8.16.19",
"@wdio/devtools-service": "^8.16.20",
"@wdio/local-runner": "^8.16.20",
"@wdio/spec-reporter": "^8.16.17",
"eslint": "^8.50.0"
},
"eslintConfig": {},
"scripts": {
"wdio": "wdio run ./wdio.conf.js"
},
"dependencies": {
"chromedriver": "^117.0.3"
Harsha
To export a test script as WebdriverIO from the Chrome Recorder extension, you need to follow these steps:
1. Make sure that you have the Chrome Recorder extension installed and enabled.
2. Open the Chrome DevTools Recorder.
3. Record the test steps that you want to export.
4. Click the Export button and select "Export as WebdriverIO Test Script".
5. Save the test script to a file.
If you are unable to export the test script as WebdriverIO, make sure that you have the WebdriverIO Chrome Recorder extension installed and enabled. You can also try restarting Chrome.
If you are still unable to export the test script, please provide more information about the error message that you are receiving.
Your package.json file looks correct. You do not need to add any additional dependencies to export a test script as WebdriverIO.
To run your WebdriverIO test script, you can use the following command:
```
npx wdio run ./wdio.conf.js
```
This will run the test script in the `wdio.conf.js` file.
Here is an example of a simple WebdriverIO test script:
```javascript
describe('My Test Suite', () => {
it('should open the Google home page', async () => {
await browser.url('www.google.com/');
});
});
```
This test script will open the Google home page and verify that the page is loaded correctly.
You can use if-then-else statements in your WebdriverIO test scripts to control the flow of the test. For example, you can use an if-then-else statement to check if a certain element is present on the page and then perform different actions depending on the result.
Here is an example of a WebdriverIO test script that uses an if-then-else statement:
```javascript
describe('My Test Suite', () => {
it('should check if the searchbar is present on the page', async () => {
const searchbarElement = await browser.$('#searchbar');
if (searchbarElement.isDisplayed()) {
// The searchbar is present on the page
} else {
// The searchbar is not present on the page
}
});
});
```
This test script will check if the element with the ID `searchbar` is present on the page. If the element is present, the test will pass. If the element is not present, the test will fail.
You can use if-then-else statements to verify any information on a webpage, as long as you can find the element that contains the information and get the text or value of the element.