Attempting to click form button for element to be visible, enable and stable

Question

I am trying to click on submit button using Playwright, but can't make it work. I have following html code.

<table>
    <tr>
      <td id="ct100" onscroll="scollPosition(this);">
        <!-- some html form -->
         <input value="Save" type="submit" class="btn" />
      </td>
      <td id="ct101" onscroll="scollPosition(this);">
         <input type="text" id="input_01" onchange="updateValue();" />
         <!-- form input -->
      </td>
</table>

Playwright code:

   async saveSetupPage(): Promise<void> {
      // If I try to click submit button before any filling up any input, click is working 

      await page.locator("#input_01").click();
      await page.locator("#input_01").fill("some value");
      // trying to fill 10-12 input with same above code

      // now trying to click on submit button
      await page.locator("//*[@id='ct100_btn']").click();
   }); 
      

Now I've got the following error:

 locator.click: Timeout 30000ms exceeded.

 Call log:
   - waiting for locator('//*[@id="ct100_btn"]')
   -   locator resolved to <input value="Save" type="submit" class="btn" id="../>
   - attempting click action
   -   waiting for element to be visible, enable and stable
   -   scrolling into view if needed
   -   done scrolling
   -   <div class="UpdateProgress">

Answer 1

I had a similar issue before. My problem was, that when I filled up the input, some client validator was failing, hence submit button was disabled.

Try to check if any server/client side validation failed or not and submit button is disabled or not.

Hope it will be helpful.