puppeteer: How can the save button be clicked after the form is filled out? And Edit / delete row-CodePudding

How can the save button be clicked after the form is filled out?

<div class="MuiDialogActions-root MuiDialogActions-spacing">
   <button class="MuiButtonBase-root MuiButton-root MuiButton-outlined MuiButton-outlinedPrimary" tabindex="0" type="button">
     <span class="MuiButton-label">Cancel</span>
     <span class="MuiTouchRipple-root"></span>
  </button>
  <button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary" tabindex="0" type="submit">
     <span class="MuiButton-label">Save</span>
     <span class="MuiTouchRipple-root"></span>
   </button>
</div>

My suggested solution is:

await page.waitForSelector('.MuiButton-label')
await page.click('.MuiButtonBase-label[name=save]')

But it doesn work.

How can edit and delete a line?

<td class="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeSmall">
  <svg class="MuiSvgIcon-root MuiSvgIcon-colorSecondary MuiSvgIcon-fontSizeSmall" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 00-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
  </svg>
  <svg class="MuiSvgIcon-root MuiSvgIcon-colorSecondary MuiSvgIcon-fontSizeSmall" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z">
    </path></svg>
</td>

My suggested solution is:

await page.type('.MuiInputBase-input[name=name]', ' EDIT')
await page.click('button[type=submit]')

Please see the attachment:

enter image description here I want to achieve the following:

click on the edit button,
delete content in (Name1) then type something else,
Then click on Save

CodePudding user response：

If you are not able to change the HTML then I rather would suggest doing it like:

await page.click('button[type=submit]')