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 ↑↑
	}
]

[InduKrish]

ok, is there a way to achieve this, convert the string to RegExp inside the code block? in JSON, it acceps only string, and the using JSON.parse to convert as an object, I should be reading the object value after parsing it then add "/ /" (inside the code block, not in the json file) to pass Regexp , Can you please advise?

[InduKrish]

groupCodes.json

[
{
"code":"03",
"description" : "NEW HIRE". --> wondering how to store a RegExp here, or how to read this value, after parsing how to convert a json object into a regular expression that the test needs ie: /NEW HIRE/
}
]

const groupCode =  JSON.parse(JSON.stringify(require("../../data/groupCodes.json")));
 groupCode.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);
            console.log("DATA :" + data.description);

        //    ↯ Invoke test helper ↯
            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")
            }

        });
    });

export async function checkRow(screen, name) {

    const edit = await screen.findByTestId("Edit Aircraft Positions");
    await edit.click();
 
     const checkbox = await screen.queryByTestId('editable-nested-table-AircraftPosition')
        // .within().getByRole('row', {name: /NEW HIRE/}).
        .within().getByRole('row', {name: "/" +name +"/"}). --> want to pass json value after parsing here, can you please advise how to add a RegExp expression here after reading the json value 
        within().getByRole('cell', {name: /check/});

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

Output:
DATA :NEW HIRE --> this is the value after parsing.

not sure how to convert this to a RexExp --> /NEW HIRE/ , it always treats like a String.
below is the error, Can you please advise how to get this working.
proxy.click: TestingLibraryElementError: Unable to find an accessible element with the role "row" and name "/NEW HIRE/"

I am not sure if getByRole('row', {name: "/" +name +"/"}) converts always to a string, it hinders our progress. Can you please advise?

[InduKrish]

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

Even after using RegexParser, it still fails,
https://nesin.io/blog/convert-regex-string-javascript. -- followed the steps

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

const RegexParser = require('regex-parser');

   groupCode.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);

            console.log("DATA :" + data.description);
        
             const config = JSON.parse('{"description" : "/NEW HIRE/"}'); --> added json string manually and tried, fails as well
          //  await checkRow(screen, RegexParser(config.description));  --> it fails,


            await checkRow(screen, RegexParser(data.description));  ---> it still fails.

    
            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")
            }

        });
    });