How to implement Data Driven methods in playwright using playwright/test typescript?

Data driven complete code example:

1). First create a CSV with required data:

"test_case","Name","Age"
"TC1","John","46"
"TC2","Chris","28"

2). Then read it in your test file using CSV library:

   import fs from 'fs';
    import path from 'path';
    import { parse } from 'csv-parse/sync';
    
    const csvFilePath = path.join(__dirname, 'input.csv');
    const csvData = fs.readFileSync(csvFilePath, 'utf8');
    const testData = parse(csvData, { columns: true });
    
    // Now testData contains an array of test data representing each row in the CSV.

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

for (const row of testData) {
  test(`Test case: ${row.test_case}`, async ({ page }) => {
    // Use the data from the CSV file
    console.log(`Name of User=> ${row.Name}`)
    console.log(`Age of User=> ${row.Age}`)
  });
}

For Further Reading:

https://playwright.dev/docs/test-parameterize

https://github.com/microsoft/playwright/issues/7036#issuecomment-925164212

How to pass different test data to a test in Playwright test runner?

According to Playwright Docs about Parameterized test (DDT), this is the official way:

const names = ["foo", "bar"];
for (const name of names) {
  test(`testing with ${name}`, async ({ page }) => {
    await page.goto("/");
    console.log(name);
  });
}

When executing this test it will run twice and appear in the log as two tests.

There is another way to do. You can use xlsx which will read (.xls/.xlsx/.xlsm/.csv) formats also and converts into array of Json Object.

 import { readFile, utils, read as _read } from 'xlsx';

const read = ({ file, sheet }: { file: string, sheet: string }): Promise<any> => {
const workbook: any = readFile(file, { type: 'binary'});

if (sheet) {
    const rows: any = utils.sheet_to_json(workbook.Sheets[sheet], {
        raw: false,
    })
    return rows //This will return in the format of [{ <data from XL> }]
}}

example: if you have name and age as columns with multiple rows, the outcome will be as below, [{ name:'', age:'' },{ name:'', age:'' },]