Playwright & Selenium Locator Practice Lab [SDET ADDA]

Playwright & Selenium Locator Practice Lab [By SDET ADDA]

Playwright & Selenium Locator Practice Lab

A realistic, self-contained Web Automation Playground for QA training

Automation Playground

Use this page to practice robust locator strategies, synchronization, actions, frames, dynamic DOM changes, keyboard and mouse interactions.

Playwright

Role, label, placeholder, text, test id, CSS, XPath and chaining.

Selenium

ID, name, class, tag, link text, CSS, XPath, waits and Actions.

Training

Stable attributes are preferred; deliberately duplicated values are included for teaching.

1. Login & Form Locator Practice

Radio buttons
Preferences

2. Text, Role, Attribute & CSS/XPath Examples

Locator Practice Heading

This paragraph contains important training text for getByText and CSS demonstrations.

Duplicate training text

Duplicate training text

Useful links: Automation Documentation · Table Practice

Locator-friendly span element

3. Ordered & Unordered Lists — nth(), first(), last(), filter()

Unordered Test Tools

  • Playwright
  • Selenium
  • Cypress
  • Playwright
  • Appium
  • Selenium
  • Postman
  • RestAssured
  • Jenkins
  • Docker
  • Kubernetes

Execution Steps

  1. Open application
  2. Locate element
  3. Fill test data
  4. Click action
  5. Verify result
  6. Capture evidence
  7. Generate report
  8. Review logs
  9. Cleanup
  10. Publish results

4. Data Table — Row-Level Locators

IDNameRoleStatusRegionAction
101AaravQA EngineerActiveIndiaView
102DiyaAutomation LeadActiveUSAView
103AaravQA EngineerInactiveCanadaView
104KabirSDETActiveUKView

5. Dropdowns & Advanced Form Controls

6. Mouse Events

Click

Click this box.

Double-click

Double-click this box.

Right-click

Use contextmenu.

HoverTooltip revealed on hover
Mouse move

Move your mouse here.

Drag me
Drop here

Scrollable container — use mouse wheel or Playwright/Selenium scroll.

You reached the bottom.

7. Keyboard Events

Waiting for keyboard input...

8. Dynamic Elements & DOM Changes

Original dynamic element

10. Iframe / Frame Locator Practice

11. Nested Components — Chaining, Filtering, hasText(), has(), nth()

Playwright Pro

Enterprise browser automation

Popular

Playwright Basic

Beginner automation training

Beginner

Selenium Pro

WebDriver automation training

Popular

12. Locator Examples Cheat Sheet

HTML elementRecommended PlaywrightSeleniumWhy
<button>Login</button>getByRole('button', {name:'Login'})By.ID('loginSubmit')Prefer semantic role/name or stable ID.
input#usernamegetByLabel('Username')By.ID('username')Label is user-facing and readable.
input placeholdergetByPlaceholder('Enter username')By.CSS_SELECTOR('[placeholder="Enter username"]')Useful when placeholder is stable.
data-testidgetByTestId('username-input')By.CSS_SELECTOR('[data-testid="username-input"]')Excellent automation contract.
Visible textgetByText('Automation Documentation')By.LINK_TEXT('Automation Documentation')Good for stable user-visible content.
CSSlocator('#userTable tbody tr')By.CSS_SELECTOR('#userTable tbody tr')Precise structural selection.
XPathlocator('//table[@id="userTable"]//tr')By.XPATH('//table[@id="userTable"]//tr')Useful for relationships and complex structures.
Repeated list itemlocator('#toolList li').nth(3)findElements(By.CSS_SELECTOR(...)).get(3)Index only when uniqueness is impossible.
Filtered rowgetByRole('row').filter({hasText:'Aarav'})By.XPATH('//tr[.//td="Aarav"]')Row-level context reduces ambiguity.

13. Complete Automation Scripts

Copy the scripts below into your Playwright TypeScript and Selenium Python projects. The Playwright script intentionally covers the locator and action APIs used throughout this page.










Playwright & Selenium Locator Practice Lab · Built for QA Automation Training · Self-contained Blogger/Blogspot HTML






































Comments











Post a Comment




















Popular posts from this blog









Log4j2 configuration for Selenium Framework















Log4j2 configuration for Selenium Framework  What is log4j2 Log4j2 is the updated version of the popular and influential log4j library, used extensively throughout the Java ecosystem for so many years.  Logging events is a critical aspect of software development. While there are lots of frameworks available in Java ecosystem, Log4J has been the most popular for decades, due to the flexibility and simplicity it provides. Log4j 2 is a new and improved version of the classic Log4j framework. In Log4J2, an appender is simply a destination for log events; it can be as simple as a console and can be complex like any RDBMS. Layouts determine how the logs will be presented and filters filter the data according to the various criterion. Reasons to upgrade from Log4j 1.x to Log4j 2 Update: since August 2015, Log4j 1.x is officially End of Life and it is recommended to upgrade to Log4j 2. Update 2: Log4j 1.2 is broken in Java 9. Community support: Log4j 1.x is not actively maintained, wh...








Read more










Building Cucumber BDD Framework from Scratch using Selenium and TestNG














Image







Building BDD Framework from Scratch using Cucumber Selenium and TestNG | Mini Project Cucumber  is a popular open-source software testing tool that facilitates Behavior-Driven Development (BDD) practices. BDD is an approach to software development that emphasizes collaboration between developers, testers, and non-technical stakeholders to create a shared understanding of the desired behavior of a software system . Cucumber helps bridge the gap between technical and non-technical team members by using plain language specifications  that are easily understandable by all parties involved.  Here's a brief introduction to the Cucumber BDD framework: Feature Files:  In Cucumber, the behavior of the software is described using plain text files called "feature files." These files contain scenarios that outline different aspects of the software's behavior. Each scenario is a collection of steps written in a structured, human-readable format .  Gherkin Syntax:  Cucumber uses Gh...








Read more










Building an API testing framework using RestAssured and TestNG with data-driven testing















Below are the detailed outline and sample code for building an API testing framework using RestAssured and TestNG with data-driven testing- Project Structure ` api-testing-framework/ │ ├── src/main/java/ │   └── utils/ │       └── ExcelUtils.java │ ├── src/test/java/ │   ├── base/ │   │   └── BaseTest.java │   │ │   ├── testcases/ │   │   └── ApiTest.java │   │ │   ├── testdata/ │   │   └── TestData.xlsx │   │ │   ├── resources/ │   │   └── config.properties │   │ │   └── testng.xml │ ├── pom.xml └── README.md `  Step 1: Add Dependencies in `pom.xml` Ensure your `pom.xml` has the necessary dependencies for RestAssured, TestNG, and Apache POI (for Excel data handling). `xml <dependencies>     <!-- RestAssured Dependency -->     <dependency>   ...








Read more