Question 397713 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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").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">
Tags:

2

Answers


  1. 0

    as @ggorlen
    has said, your locator seems to be incorrect ("//*[@id=’ct100_btn’]"), as there is no such element in your HTML snippet.
    Instead, use a more accurate locator based on the available attributes, such as class or value. and also make sure that the Playwright waits for the elements to be visible, enabled, and stable before interacting with them such as something like this for your Playwrite code

    async saveSetupPage(): Promise<void> {
  await page.locator("#input_01").fill("some value");
  await page.waitForTimeout(1000); 
  await page.locator("input[type='submit'][value='Save']").click();
  await page.waitForNavigation();

    }

    Login or Signup to reply.
  2. 0

    Here’s how you can resolve the issue with clicking the submit button using Playwright in your given scenario:

    Problem

    The locator.click action times out because Playwright is unable to find the submit button with the specified selector (//*[@id=’ct100_btn’]). The provided HTML does not have an element with the ID ct100_btn.

    Solution

    Update the selector to correctly target the submit button based on your provided HTML.

    HTML

    <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>
    </tr>
</table>

    Playwright Code

    async saveSetupPage(): Promise<void> {
// Fill the input field
await page.locator("#input_01").fill("some value");

// Click the submit button
await page.locator('td#ct100 input[type="submit"]').click();
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search