Returns error while reading data from json or csv file and running parameterized tests

[InduKrish]

When running parameterized tests using the JSON file or csv file, or from array, see the following error proxy.click: TestingLibraryElementError: Unable to find an accessible element with the role "row" and name "/NEW HIRE/", Can you please advise why it throws an error while reading from json or csv file.

// await checkRow(screen, /NEW HIRE/);---> this RegExp works when passed directly, trying to read the same from json or csv file.

await checkRow(screen, "/" + data.description + "/"); ---> string concat also resulted in the same error, Screenshot is attached,

JSON file:

groupCodes.json file [ { "code":"03", "description" : "/NEW HIRE/" } ]

    const groupCode =  JSON.parse(JSON.stringify(require("../../data/groupCodes.json")));

    groupCode.forEach(data =>
    {
        test(`Group code validation table with ${data.description}`, async ({
                                                 page, screen, within
                                             }) => {
            const table = await screen.findByTestId('nested-table-GroupCode')
            const row = within(table).getByRole('row', {name: /NEW HIRE/})
            const cell = within(row).getAllByRole('cell')
            const activeStatus = await cell.nth(0).textContent();

            console.log("Status is :" + activeStatus);

            // ↯ Invoke test helper ↯
           await checkRow(screen, data.description);   --> reading data from json file

            await page.waitForTimeout(3000);
            if (activeStatus == 'minus-circle') {
                expect(await cell.nth(0).textContent()).toEqual("success")
            } else {
                expect(await cell.nth(0).textContent()).toEqual("minus-circle")
            }

        });
    });

groupCodes.csv file: "code","description" "03","/NEW HIRE/"

CSV file:

const fs = require('fs');
import path from 'path';
import { parse } from 'csv-parse/sync';
const records = parse(fs.readFileSync(path.join(__dirname, '../../data/groupCodes.csv')), {
    columns: true,
    skip_empty_lines: true
});

 records.forEach(data =>
    {
        test.only(`Group codes table with ${data.description}`, async ({
                                                                          page, screen, within
                                                                      }) => {
            const table = await screen.findByTestId('nested-table-GroupCode')
            const row = within(table).getByRole('row', {name: /NEW HIRE/})
            const cell = within(row).getAllByRole('cell')
            const activeStatus = await cell.nth(0).textContent();

            console.log("Status is :" + activeStatus);

        //    ↯ Invoke test helper ↯
            await checkRow(screen, data.description);

            //await checkRow(screen, data.description);

            await page.waitForTimeout(3000);
            if (activeStatus == 'minus-circle') {
                expect(await cell.nth(0).textContent()).toEqual("success")
            } else {
                expect(await cell.nth(0).textContent()).toEqual("minus-circle")
            }

        });
    });

helper method:

export async function checkRow(screen, RegExp) {

    const edit = await screen.queryByTestId("Edit Group Codes");

    await edit.click();

    // const editTable = await screen.queryByTestId('editable-nested-table-GroupCode');
    // const editRow = within(editTable).queryByRole('row', { name }); // ---> should be able to pass different names each time
    // const checkbox = within(editRow).queryByRole('cell', {name: /check/});

    const checkbox = await screen.queryByTestId('editable-nested-table-GroupCode')
       // .within().getByRole('row', {name: /NEW HIRE/}).
        .within().getByRole('row', {name: RegExp }).
        within().getByRole('cell', {name: /check/});

    await checkbox.click();

    const save = await screen.findByTestId("button-text-save-GroupCode");
    await save.click();
}

[jrolfs]

It looks like you're not deserializing the RegExp from your JSON, so you're passing the string "/NEW HIRE/" instead of /NEW HIRE/ as the name option.

[InduKrish]

const groupCode = JSON.parse(JSON.stringify(require("../../data/groupCodes.json")));

i am already deserializing using JSON.parse, not sure why it is passed as string.

[jrolfs]

But you're storing it as a string in your JSON file:

// groupCodes.json file
[
    {
        "code":"03",
        "description" : "/NEW HIRE/"
                     // ↑↑ string ↑↑
    }
]