0

Fairly new to Codeceptjs and Puppeteer. Wondering if somebody could provide some insight as to best practices for working with, interacting with elements in tables?

I have a table where the first column of each data row is a check box.

I want to identify a row in the table by text in one of the columns.

I have built the method shown below to delete a record, as there is a delete button within the properties of an item that displays after simply clicking on the row.

deleteSite(id) {
    I.click(locate('tr').withText(id));
    I.click(this.button.delete);
    I.wait(3);
  },

I am trying to figure out how to structure this in such a way that I can still find the row I'm after by using locate, but then also click the check box in the first column of that row.

If there is a better way/approach to do this, I'm all ears.

Any assistance would be greatly appreciated.

Thanks, Bob

bboursaw73
  • 1,128
  • 2
  • 13
  • 26

1 Answers1

0

After many trials and mistakes on my part, this is actually quite easy to do and works well.

Here is what I've come up with. If others have suggestions for how this can be improved, I am always open to that.

Locate a row, tick a check box in col1 of identified row

async selectSiteById(siteId) {
    // Get total number of rows in table (body)
    const totalRows = await I.grabAttributeFrom('tbody tr');
    
    //  Loop through all rows of the table
    for (let i = 0; i < totalRows.length; i++) {

      // Get the value of the site ID and store to str
      let str = await I.grabTextFrom(`tbody tr:nth-child(${i+1}) td:nth-child(2)`);

      // Click the checkbox in col1 for the identified row
      if (str === siteId) {
        within(`tbody tr:nth-child(${i+1}) td:nth-child(1) span span`, () => {
          I.click('input');
        })
      }
    }
  },
bboursaw73
  • 1,128
  • 2
  • 13
  • 26