Session-1

Agenda

• Introduction to WebdriverIO
• Setting up the Environment
• Basic WebdriverIO Test
• Q&A

Introduction to WebdriverIO

• What is WebdriverIO?
  • WebdriverIO is a custom implementation for selenium's W3C webdriver API. It is written in Javascript and packaged into 'npm' and runs on Node.js.
  • WebdriverIO is a browser automation framework based on WebDriver and DevTools protocols.
  • It allows testing modern web applications across multiple browsers and platforms.
• Key Features and Capabilities
  • It supports multiple framework such as Mocha, Jasmine, Cucumber
  • Easily Integrate with CI/CD tools
  • Supports cross browser testing
  • Customizable plugins and reporters.
  • We can use WebdriverIO to automate any modern web and mobile application:
    • 🌐   modern web applications written in React, Vue, Angular, Svelte or other frontend frameworks
    • 📱   hybrid or native mobile applications running in an emulator/simulator or on a real device
    • 💻   native desktop applications (e.g. written with Electron.js)
    • 📦   unit or component testing of web components in the browser
• Why Use WDIO for Automation?
  • Easy setup and configuration.
  • Rich ecosystem for plugins and integrations.
  • Excellent documentation and active community support.
• Comparison with other Automation tools
  • Selenium vs WDIO
    • Selenium is another automation tool which provide similar functionality to the WDIO but there are some advantages compare to using the selenium.
    • Selenium relies on verbose code, whereas WebdriverIO offers a more concise and developer-friendly API.
    • WebdriverIO supports modern JavaScript/TypeScript out of the box, making it more compatible with modern development workflows.
    • Selenium has been an industry standard but lacks some of the advanced features and flexibility provided by WebdriverIO, such as built-in DevTools support.
    • WebdriverIO has a faster setup process with its CLI configuration tool compared to Selenium's manual driver setups.
  • Advantages of WebdriverIO for Modern JavaScript/TypeScript Projects
    • Seamless integration with TypeScript for type safety and autocompletion.
    • Out-of-the-box compatibility with popular frameworks like React, Angular, and Vue.js.
    • Comprehensive support for asynchronous testing using promises.
    • Rich plugin ecosystem for enhanced testing capabilities (e.g., visual regression testing, API testing).

Environment Setup

• Prerequisites
  • Java - for Selenium
  • Install Node.js and npm.
  • Create WDIO Project (If you are using in existing project run below command in the root directory):

    npm init wdio@latest .
    

  • To check version of WDIO:

    npm ls webdriverio
    

  • To Run all the tests present:

    npx wdio run wdio.conf.js
    

    OR

    yarn run wdio
    npm run wdio
    

  Run - npm install @wdio/allure-reporter --save-dev
  • Add reporter config in wdio.conf.js
  • Run test and check Allure Results folder is generated
  • Install allure command line tool npm install -g allure-commandline --save-dev
  • Run commands allure generate allure-results // this will generate allure-report folder allure open // will start server and open report

Session-2

Agenda

• Page Object Model
• Selectors
• complex Scenarios
• wait commands

Page Object Model

• A POM is a design pattern to create object repository
• A class is created for each page to identify web elements of that page, it also contains methods to do action on the objects
• 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
• How to implement Page Object Model
  1. Create a class for each page
  2. Create locators of all objects to be used in that page
  3. Create methods or actions to be performed on the objects
  4. Refer in the test scripts
  5. Run and validate

Different Selectors

1. attribute based selector

const elem = await $('[data-testid="username"]')  
await expect(elem).toHaveValue('foobar')

1. CSS Selector

const button = await $("button[data-testid='submit']");
await button.click();

3. XPath Selector

const link = await $("//a[text()='Learn More']");
await link.click();

4. Chaining Selectors

const item = await $(".list").$(".item");
console.log(await item.getText());

Handling Complex Scenarios

• Working with Frames

await browser.switchToFrame(await $("iframe"));
const frameElement = await $("#insideFrame");
console.log(await frameElement.getText());
await browser.switchToParentFrame();

• File Uploads

const fileInput = await $("input[type='file']");
await fileInput.setValue("/path/to/file.jpg");

• Popups and Alerts

await browser.acceptAlert();

Wait Commands

• Explicit Wait:

  await browser.waitUntil(async () => {
    return (await $("#status").getText()) === "Complete";
  }, {
    timeout: 5000,
    timeoutMsg: "Status did not change to Complete",
    interval: 1000,
  });
  

• Implicit Wait: (Avoid Using this)

  await browser.setTimeout({ implicit: 10000 });
  const element = await $("#myElement");
  console.log(await element.isDisplayed());
  

• Pause Command: (Avoid using in production only use in debugging)

  await browser.pause(2000); // Pause execution for 2 seconds
  

• Wait for Element to Be Displayed:

  const elem = await $("#button");
  await elem.waitForDisplayed();
  

• Wait for Clickable:

  const button = await $("#submit");
  await button.waitForClickable({ timeout: 5000 });
  await button.click();
  

Other waitFor commands waitFor, waitForVisible, waitForDialog, waitForClickable, waitForDisplayed, waitForEnabled, and waitForExist. Ref:

• Automate the following scenario:
  1. Open a shopping website.
  2. Search for a product.
  3. Add the product to the cart.
  4. Validate that the product is displayed in the cart.