[Question] How to preserve table values after tests modify the existing values in the table?

[InduKrish]

I have few tables on the UI that support 'adding a new row and editing the existing row values, the test should verify if a user can add rows and edit values in the table.

however after tests are done running , the table values need to be preserved to its original values, as a nutshell, my test should verify if user can enter new values in the table and able to be saved, but once verified, it should retain the initial table values.

I am wondering if i can web scrape table html and store the values in csv file (global setup), then update the initial value back to the table (in global teardown) once tests are done running.

However i don't have a working example, can you please assist how to achieve this scenario using playwright? and please point me to the right resource/working example or any other solution to retain the values?

note:db snapshot is ruled out, we dont want to deal with the database in this case.

[rwoll]

Thanks for the question!

We'll be most effective/efficient in helping out if you can provide a small example of the site/code under test.

For example, provide a link to the site or ideally just a small snippet of the HTML/DOM under test that shows your table. Along with this, include a description of what data you'd like to extract from said DOM and the assertions you'd like to make. Depending on implementation of your app, actual advice will vary, and at this point we'd only be able to guess!

In the interim, here's some related pages to skim through:

• For selecting DOM bits in the UI: https://playwright.dev/docs/selectors
• Making assertions: https://playwright.dev/docs/test-assertions
• Iterating over elements: https://playwright.dev/docs/locators#lists

[InduKrish]

this is the DOM after clicking pencil /edit icon htmlviewer.txt

This is the dom after clicking save button save.txt

I would like to store the values of input-VacationAccrual-vacationDays-0 before editing these values, after hitting save want to check if the new data is saved and assert if td-VacationAccrual-vacationDays-0 (after save -this is the locator - screenshot is attached above ) are updated with the new values supplied in the test,

and after test is done running, i would like to restore the values of of input-VacationAccrual-start-0 (in this eg: 1) and input-VacationAccrual-vacationDays-0 ((in this eg: 59) back to what it had originally . it has several rows like this, want to do the same.

Steps:

1. Edit pencil icon
2. Store the initial vale - into result variable
3. Supply new value to the text box
4. Save button
5. check if the table is update with the new value
6. again clicking edit to type the original value
7. click save button
8. doing assertion to make that the original value is updated back,

This test is not a real solution, i just wanted to give a try to see if i can store the initial value and store it later. but ideally if any test steps fail before reset, the reset steps below will not execute .

locatore values: vacationAccuralvacationDays0 : '[data-testid="input-VacationAccrual-vacationDays-0"]', vacationAccuralrowstart0 : '[data-testid="td-VacationAccrual-vacationDays-0"]',

async InputVacationAccuralDays0(name, value) { const result = await this.retrieveAttributeContainsText(vacationAccuralvacationDays0, name); console.log(" result value" + result); await this.waitAndFill(vacationAccuralvacationDays0, value); await this.saveVacationAccural(); await this.verifyElementHaveText(vacationAccuralrowstart0, value) console.log("***saved")

    ***resetting the values here in the table to the original value after testing save functionality above.**
    await this.editVacationAccural();
    await this.waitAndFill(vacationAccuralvacationDays0, result)
    await this.saveVacationAccural();
    await this.verifyElementHaveText(vacationAccuralrowstart0, result)
    console.log("***output")
}

to retrieve attribute value: async retrieveAttributeContainsText(selector, name) { const inputElement = this.page.locator(selector); const result = await inputElement.getAttribute(name); return result; }

checking the table value after save button is clicked: async verifyElementHaveText(selector, text) { await this.page.waitForSelector(selector); return await expect(this.page.locator(selector)).toHaveText(text); }

This example is just for one cell, i need to do the same for 6 different tables on the UI, and has several cells, so ideally the above test is not solution ,i want to handle this in a better way, Please advise, your help is much appreciated!

how to dynamically store the initial values of the table somewhere and then reset tables to those original values outside the test, reset should not be part of the test ideally, would be great if reset is outside the test, so that even if test fails, the rest will still execute or if reset is within the test, then if test assertion fails, rest will never execute like the above case,

is webscraping the real technique to address the issue? I am not sure ,Please help us with an example and the solution.

[InduKrish]

I am wondering if i can achieve this using API

API calls -capture the initial value (json file) in global-setup js file perform all testing in the tables- modify the table values, save functionality. then intercept network calls - pass in the original json value captured in the first step , so that way the original value will be restored in the global teardown file after tests are done running.

Can you please confirm if i am thinking it correctly?

or Please advise me if you can think of any other solution.

and also please advise if webscraping is the fit for this scenario or not, i didnt find much examples, please point me to the resource to load the table values - rows/columns to csv file using webscraping.

which one do you recommend over the other- webscraping or handling using api intercepting?

[rwoll]

I recommend simplifying things. Instead of trying to scrape a table, add a beforeEach hook (https://playwright.dev/docs/api/class-test#test-before-each) that fills out your table with some known test data. This way you start each test from a known good state and do not worry about dynamically scraping a table.

[InduKrish]

not sure if i am following you. i guess my question is different, i do not have any known test data, I will only need to read from the tables once they are loaded on the UI through api calls,

like i said, i need to reset these initial values to those table after my tests are done running, My tests would be ideally to edit those values and check if they get saved to the backend, once tests are done running, i need to reset those initial valiues back to the table.

This is what i am thinking:

1. I am wondering if i can store the response API, using page.waitForResponse , and store the result in JSON, Now i have all the initial table value.
2. now, i will run my tests, modify the table values, check save/edit buttons functionality, now the table values are the new values i supply in the test.
3. now after tests are done running, make POST/PUT call to update with original JSON value (using request.post()) captured in step 1 and make post/put call to the backend, so this way i can now restore the initial values back in the database and UI.

Please confirm if i am thinking it correctly. I am not referring anything related to webscraping here.

[rwoll]

Closing per https://github.com/microsoft/playwright/issues/17521, https://github.com/microsoft/playwright/issues/17542, https://github.com/microsoft/playwright/issues/17546