Test Code (Java)
    |
    v
WebDriver API  (driver.findElement, click, sendKeys)
    |
    v
JSON Wire / W3C WebDriver Protocol (HTTP)
    |
    v
Browser Driver (ChromeDriver, GeckoDriver)
    |
    v
Browser (Chrome, Firefox, Edge)

Key Objects:
  WebDriver   -- one browser instance
  WebElement  -- one DOM element
  By          -- locator strategy
  Actions     -- advanced interactions

Test Code (TypeScript)
    |
    v
Playwright API  (page.locator, click, fill)
    |
    v
CDP / BiDi Protocol (WebSocket - direct!)
    |
    v
Browser (Chromium, Firefox, WebKit)

Key Objects:
  Browser     -- browser process
  Context     -- isolated session (cookies, storage)
  Page        -- single tab
  Locator     -- lazy element reference
  expect()    -- auto-retry assertions

ATB13xSeleniumAdvanceFramework/
├─ pom.xml
├─ testng_vwo_*.xml          (5 config files)
├─ src/main/java/.../
│   ├─ base/
│   │   └─ CommonToAllPage.java
│   ├─ driver/
│   │   ├─ DriverManager.java
│   │   └─ DriverManagerTL.java
│   ├─ pages/
│   │   ├─ pageFactory/
│   │   │   ├─ LoginPage_PF.java
│   │   │   └─ DashboardPage_PF.java
│   │   └─ pageObjectModel/
│   │       └─ vwo/
│   │           ├─ LoginPage.java
│   │           └─ DashBoardPage.java
│   └─ utils/
│       ├─ PropertiesReader.java
│       ├─ WaitHelpers.java
│       └─ TakeScreenShot.java
└─ src/test/java/.../
    ├─ base/CommonToAllTest.java
    ├─ listeners/
    │   ├─ RetryAnalyzer.java
    │   ├─ RetryListener.java
    │   └─ ScreenshotListener.java
    ├─ tests/vwo/...
    └─ utilsExcel/UtilExcel.java

Advance-Playwright-Framework/
├─ playwright.config.ts
├─ tsconfig.json
├─ package.json
├─ .env
├─ Dockerfile
├─ docker-compose.yml
├─ .github/workflows/
│   ├─ playwright.yml
│   └─ smoke-tests.yml
└─ src/
    ├─ pages/          (Page Objects)
    │   ├─ LoginPage.ts
    │   ├─ HomePage.ts
    │   ├─ ProductPage.ts
    │   ├─ CheckoutPage.ts
    │   └─ index.ts        (barrel)
    ├─ modules/        (Business Flows)
    │   ├─ LoginModule.ts
    │   ├─ ProductModule.ts
    │   ├─ CheckoutModule.ts
    │   └─ index.ts
    ├─ fixtures/       (Auth/Setup)
    │   ├─ auth.fixture.ts
    │   └─ index.ts
    ├─ utils/          (Helpers)
    │   ├─ Logger.ts
    │   ├─ WaitHelper.ts
    │   ├─ ApiHelper.ts
    │   └─ DataGenerator.ts
    ├─ api/            (REST helpers)
    ├─ testdata/       (JSON + types)
    │   ├─ users.json
    │   ├─ products.json
    │   └─ types.ts
    └─ tests/          (Specs)
        ├─ login.spec.ts
        ├─ product.spec.ts
        └─ checkout.spec.ts

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="VWO Suite" parallel="methods" thread-count="2">
  <listeners>
    <listener class-name="...RetryListener"/>
    <listener class-name="...ScreenshotListener"/>
  </listeners>
  <test name="VWO Login Tests">
    <classes>
      <class name="...TestVWOLogin_05...">
        <methods>
          <include name="testPositiveLogin"/>
          <include name="testNegativeLogin"/>
        </methods>
      </class>
    </classes>
  </test>
</suite>

import { defineConfig, devices } from '@playwright/test';
import * as dotenv from 'dotenv';
dotenv.config();

export default defineConfig({
  testDir: './src/tests',
  fullyParallel: true,
  workers: process.env.CI ? 2 : 3,
  retries: process.env.CI ? 2 : 0,
  timeout: 60_000,
  expect: { timeout: 10_000 },
  reporter: [
    ['html', { open: 'never' }],
    ['json', { outputFile: 'test-results/results.json' }],
    ['list'],
  ],
  use: {
    baseURL: process.env.BASE_URL,
    trace: 'on-first-retry',
    video: 'retain-on-failure',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
  ],
});

# data.properties
vwoURL=https://app.vwo.com
[email protected]
password=Test@4321
browser=Chrome

// PropertiesReader.java
public class PropertiesReader {
  static Properties prop = new Properties();
  static {
    FileInputStream fis = new FileInputStream(
      "src/main/resources/data.properties"
    );
    prop.load(fis);
  }
  public static String readKey(String key) {
    return prop.getProperty(key);
  }
}

# .env
BASE_URL=http://localhost:3000
API_BASE_URL=http://localhost:3000/api
[email protected]
TEST_PASSWORD=SecurePass123
LOG_LEVEL=INFO

// src/config/index.ts
import * as dotenv from 'dotenv';
dotenv.config();

export const AppConfig = {
  baseUrl: process.env.BASE_URL || 'http://localhost:3000',
  apiBaseUrl: process.env.API_BASE_URL || '',
  testUser: {
    email: process.env.TEST_USERNAME || '',
    password: process.env.TEST_PASSWORD || '',
  },
  timeouts: {
    api: 30_000,
    default: 30_000,
  },
} as const;

public class LoginPage extends CommonToAllPage {
  private By emailLocator = By.id("login-username");
  private By passwordLocator = By.id("login-password");
  private By loginBtnLocator = By.id("js-login-btn");
  private By errorLocator = By.cssSelector(".error-msg");

  public LoginPage(WebDriver driver) {
    super(driver);
  }

  public void enterEmail(String email) {
    enterInput(emailLocator, email);
  }

  public void enterPassword(String password) {
    enterInput(passwordLocator, password);
  }

  public DashBoardPage clickLogin() {
    clickElement(loginBtnLocator);
    return new DashBoardPage(driver);
  }

  public String getErrorMessage() {
    return getText(errorLocator);
  }
}

import { Page, Locator, expect } from '@playwright/test';

export class LoginPage {
  private readonly page: Page;

  // Locators (arrow functions - lazy evaluation)
  readonly emailInput = (): Locator =>
    this.page.getByTestId('login-username');
  readonly passwordInput = (): Locator =>
    this.page.getByTestId('login-password');
  readonly loginButton = (): Locator =>
    this.page.getByRole('button', { name: 'Login' });
  readonly errorMessage = (): Locator =>
    this.page.locator('.error-msg');

  constructor(page: Page) {
    this.page = page;
  }

  async navigate(): Promise<void> {
    await this.page.goto('/login');
  }

  async enterEmail(email: string): Promise<void> {
    await this.emailInput().fill(email);
  }

  async enterPassword(password: string): Promise<void> {
    await this.passwordInput().fill(password);
  }

  async clickLogin(): Promise<void> {
    await this.loginButton().click();
  }

  // Assertions live in the Page Object
  async expectErrorMessage(msg: string): Promise<void> {
    await expect(this.errorMessage()).toHaveText(msg);
  }

  async expectLoginVisible(): Promise<void> {
    await expect(this.loginButton()).toBeVisible();
  }
}

public class CommonToAllPage {
  WebDriver driver;

  public CommonToAllPage(WebDriver driver) {
    this.driver = driver;
  }

  // These wrapper methods are ALL unnecessary
  // in Playwright:
  public void clickElement(By locator) {
    driver.findElement(locator).click();
  }

  public void enterInput(By locator, String text) {
    driver.findElement(locator).sendKeys(text);
  }

  public String getText(By locator) {
    return driver.findElement(locator).getText();
  }

  public void openVWOUrl() {
    driver.get(PropertiesReader.readKey("vwoURL"));
  }
}

// CommonToAllTest.java
public class CommonToAllTest {
  @BeforeMethod
  public void setUp() {
    DriverManager.init();
  }
  @AfterMethod
  public void tearDown() {
    DriverManager.down();
  }
}

// CommonToAllPage.java is ELIMINATED because:
//
// clickElement(locator)  -> locator.click()
// enterInput(locator, t) -> locator.fill(t)
// getText(locator)       -> locator.textContent()
//
// Playwright's Locator API already provides all of
// these methods with auto-waiting built in.
// No wrapper needed!

// CommonToAllTest.java is ELIMINATED because:
//
// @BeforeMethod setUp() / @AfterMethod tearDown()
// with DriverManager.init() / .down()
//
// Playwright automatically:
// - Creates a fresh browser context per test
// - Provides `page` via fixture injection
// - Cleans up after each test
//
// Your test just declares what it needs:

import { test, expect } from '@playwright/test';

test('login test', async ({ page }) => {
  // `page` is auto-created, auto-cleaned
  // No setup, no teardown, no driver management
  const loginPage = new LoginPage(page);
  await loginPage.navigate();
  await loginPage.enterEmail('[email protected]');
});

public class TestVWOLogin extends CommonToAllTest {

  @Test(priority = 1)
  public void testNegativeLogin() {
    LoginPage loginPage = new LoginPage(driver);
    loginPage.openVWOUrl();
    loginPage.enterEmail("[email protected]");
    loginPage.enterPassword("wrong");
    loginPage.clickLogin();
    String error = loginPage.getErrorMessage();
    Assert.assertEquals(error,
      "Your email or password is incorrect.");
  }

  @Test(priority = 2, dependsOnMethods = "testNegativeLogin")
  public void testPositiveLogin() {
    LoginPage loginPage = new LoginPage(driver);
    loginPage.openVWOUrl();
    loginPage.enterEmail(
      PropertiesReader.readKey("username"));
    loginPage.enterPassword(
      PropertiesReader.readKey("password"));
    DashBoardPage dashboard = loginPage.clickLogin();
    String url = driver.getCurrentUrl();
    Assert.assertTrue(url.contains("dashboard"));
  }
}

import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';
import { LoginModule } from '../modules/LoginModule';

test.describe('VWO Login Tests', () => {

  test('negative login shows error @P0', async ({ page }) => {
    const loginPage = new LoginPage(page);
    await loginPage.navigate();
    await loginPage.enterEmail('[email protected]');
    await loginPage.enterPassword('wrong');
    await loginPage.clickLogin();
    await loginPage.expectErrorMessage(
      'Your email or password is incorrect.'
    );
  });

  test('valid login reaches dashboard @P0', async ({ page }) => {
    const loginModule = new LoginModule();
    await loginModule.doLogin(
      page,
      process.env.TEST_USERNAME!,
      process.env.TEST_PASSWORD!,
    );
    await expect(page).toHaveURL(/.*dashboard/);
  });
});

public class WaitHelpers {
  // 1. Hard wait (BAD)
  public static void waitJVM(int seconds) {
    Thread.sleep(seconds * 1000);
  }

  // 2. Implicit wait
  public static void waitImplicitWait(WebDriver d, int s) {
    d.manage().timeouts()
      .implicitlyWait(Duration.ofSeconds(s));
  }

  // 3. Explicit wait - visibility
  public static void checkVisibility(WebDriver d, By l) {
    new WebDriverWait(d, Duration.ofSeconds(30))
      .until(ExpectedConditions
        .visibilityOfElementLocated(l));
  }

  // 4. Explicit wait - returns element
  public static WebElement visibilityOfElement(
      WebDriver d, By l, int s) {
    return new WebDriverWait(d, Duration.ofSeconds(s))
      .until(ExpectedConditions
        .visibilityOfElementLocated(l));
  }

  // 5. Presence check
  public static WebElement presenceOfElement(
      WebDriver d, By l, int s) {
    return new WebDriverWait(d, Duration.ofSeconds(s))
      .until(ExpectedConditions
        .presenceOfElementLocated(l));
  }

  // 6. Fluent wait
  public static void waitFluentVisibility(
      WebDriver d, By l) {
    new FluentWait<>(d)
      .withTimeout(Duration.ofSeconds(30))
      .pollingEvery(Duration.ofSeconds(2))
      .ignoring(NoSuchElementException.class)
      .until(ExpectedConditions
        .visibilityOfElementLocated(l));
  }
}

// WaitHelpers.java is ELIMINATED because Playwright
// auto-waits before every action.

// 1. Thread.sleep -> REMOVED (auto-wait handles it)
// 2. implicitlyWait -> NOT NEEDED (auto-wait)
// 3. checkVisibility ->
await expect(locator).toBeVisible();
// 4. visibilityOfElement ->
await locator.waitFor({ state: 'visible' });
// 5. presenceOfElement ->
await locator.waitFor({ state: 'attached' });
// 6. FluentWait ->
// Playwright auto-retries assertions. For custom:
import { WaitHelper } from '../utils/WaitHelper';
await WaitHelper.waitForCondition(
  page,
  async () => {
    const count = await page.locator('.item').count();
    return count > 0;
  },
  { timeout: 30000, interval: 2000 }
);

// In practice, 95% of waits are just:
await locator.click();     // auto-waits
await locator.fill('x');   // auto-waits
await expect(loc).toBeVisible(); // auto-retries

// The remaining 5% use:
await page.waitForURL('**/dashboard');
await page.waitForLoadState('networkidle');
await page.waitForResponse('**/api/data');

// RetryAnalyzer.java
public class RetryAnalyzer implements IRetryAnalyzer {
  int counter = 0;
  int retryLimit = 3;

  public boolean retry(ITestResult result) {
    if (counter < retryLimit) {
      counter++;
      return true;
    }
    return false;
  }
}

// ScreenshotListener.java
public class ScreenshotListener implements ITestListener {
  public void onTestFailure(ITestResult result) {
    WebDriver driver = DriverManager.getDriver();
    File src = ((TakesScreenshot) driver)
      .getScreenshotAs(OutputType.FILE);
    String timestamp = new SimpleDateFormat(
      "yyyyMMdd_HHmmss").format(new Date());
    String path = "failure_screenshots/"
      + result.getName() + "_" + timestamp + ".png";
    FileUtils.copyFile(src, new File(path));
    Reporter.log("<a href='" + path + "'>Screenshot</a>");
  }
}

// ALL of the above is replaced by config options:

export default defineConfig({
  // RetryAnalyzer.java -> one line:
  retries: process.env.CI ? 2 : 0,

  // ScreenshotListener.java -> config options:
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'on-first-retry',
  },

  // Allure + ReportNG -> built-in reporters:
  reporter: [
    ['html', { open: 'never' }],
    ['json', { outputFile: 'results.json' }],
    ['list'],
    // Custom reporter (optional):
    ['./src/utils/CustomTTAReporter.ts'],
  ],
});

// That's it. ~100 lines of Java replaced by
// ~10 lines of configuration.

// UtilExcel.java
public class UtilExcel {
  public static Object[][] getTestDataFromExcel(
      String sheetName) {
    FileInputStream fis = new FileInputStream(
      "src/test/resources/TestData.xlsx");
    XSSFWorkbook workbook = new XSSFWorkbook(fis);
    XSSFSheet sheet = workbook.getSheet(sheetName);
    int rows = sheet.getLastRowNum();
    int cols = sheet.getRow(0).getLastCellNum();
    Object[][] data = new Object[rows][cols];
    for (int i = 1; i <= rows; i++) {
      for (int j = 0; j < cols; j++) {
        data[i-1][j] = sheet.getRow(i)
          .getCell(j).toString();
      }
    }
    return data;
  }
}

// Usage in test:
@DataProvider
public Object[][] loginData() {
  return UtilExcel.getTestDataFromExcel("Login");
}

@Test(dataProvider = "loginData")
public void testLogin(String email, String pass) {
  // test with data...
}

// src/testdata/users.json
{
  "validUsers": [
    {
      "email": "[email protected]",
      "password": "SecurePass123",
      "role": "standard"
    },
    {
      "email": "[email protected]",
      "password": "AdminPass456",
      "role": "admin"
    }
  ],
  "invalidUsers": [
    {
      "email": "[email protected]",
      "password": "bad",
      "expectedError": "Invalid credentials"
    }
  ]
}

// src/testdata/types.ts
export interface ValidUser {
  email: string;
  password: string;
  role: string;
}

// Usage in test:
import users from '../testdata/users.json';

for (const user of users.validUsers) {
  test(`login as ${user.role}`, async ({ page }) => {
    // test with user data...
  });
}