[Bug]: Unable to do ‘Fill’ action in an Input Field in Firefox browser when using JavaScript Playwright Cucumber framework

[manojkumar3101]

Version

1.41.2

Steps to reproduce

I have been working on an automation project using Playwright JavaScript with the Cucumber framework. I've encountered an issue where I am unable to proceed with the "fill" action in the Firefox browser, while the same script runs correctly in Chrome and Edge browsers.
I have given the code and screenshot of the field in which I am facing an issue. I have also attached the XPath for the first input field “Min. QTM.

pageFixture.page.locator("//input[@formcontrolname='min_quantum']").fill(minQuantumValue1);

Input tag(Xpath)

Expected behavior

The fill action should work fine just like it works for the other two browsers(Chrome and edge)

Actual behavior

The fill action is not working in Firefox browser.
The error massage is displayed in the console as:
Test timeout of 160000ms exceeded.

Error: locator.fill: Test timeout of 160000ms exceeded.
Call log:
  - waiting for locator('//input[@formcontrolname=\'min_quantum\']')
  -   locator resolved to <input type="text" _ngcontent-ng-c2430308819="" formcon…/>
  - elementHandle.fill("99999")
  -   waiting for element to be visible, enabled and editable
  -   element is visible, enabled and editable
  -   locator resolved to <input type="text" _ngcontent-ng-c2430308819="" formcon…/>
  - elementHandle.fill("99999")

401 | if (await this.page.isVisible("//input[@formcontrolname='min_quantum']")) {

402 | await this.page.locator("//input[@formcontrolname='min_quantum']").fill(minQuantumValue1);

Additional context

Workarounds I tried:

1. Setting timeout for particular field
   await this.page.locator("//input[@formcontrolname='min_quantum']").fill(minQuantumValue1,{timeout:90000});

2. Playwright Action (Fill and type )
   I tried filling the ‘Min. QTM’ field and clearing the field and typing the field doesn’t work.

await pageFixture.page.locator("//input[@formcontrolname='min_quantum']").fill(minQuantumValue1);
await pageFixture.page.locator("//input[@formcontrolname='min_quantum']").fill('');
await pageFixture.page.locator("//input[@formcontrolname='min_quantum']").type(minQuantumValue1);

3. JavaScript query selector
   await pageFixture.page.evaluate((minQuantumValue1) => {
   document.querySelector('input[placeholder*=Min]').value = minQuantumValue1;
   }, minQuantumValue1);
   In this approach, I faced another issue as I was able to fill the ‘Quantum’ field but after that ‘Place Response’ button is disabled.

4. . Playwright Action (Fill) and JavaScript query selector
   Tried filling the ‘Min. QTM ‘field in playwright, then cleared that field and again filled the same field using JavaScript Query selector
   await pageFixture.page.locator("//input[@formcontrolname='min_quantum']").fill(minQuantumValue1);
   await pageFixture.page.locator("//input[@formcontrolname='min_quantum']").fill('');
   await pageFixture.page.evaluate((minQuantumValue1) => {
   document.querySelector('input[placeholder*=Min]').value = minQuantumValue1;
   }, minQuantumValue1);
   On trying this, I got timeout error message

5.Javascript Query selector
Tried filled the ‘Min. QTM’ field in JavaScript Query selector and cleared the same field in JavaScript Query selector and again filled the ‘Min. QTM’ field using the JavaScript Query selector
await pageFixture.page.evaluate((minQuantumValue1) => {
document.querySelector('input[placeholder*=Min]').value = minQuantumValue1;
document.querySelector('input[placeholder*=Min]').value = " ";
document.querySelector('input[placeholder*=Min]').value = minQuantumValue1;
}, minQuantumValue1);
In this approach, I faced another issue as I was able to fill the ‘Min. QTM’ field but after that ‘Place Response’ button is disabled.

6.Try catch method
try {
console.log("Trying...");
await pageFixture.page.locator("//input[@formcontrolname='min_quantum']").fill(minQuantumValue1);
await pageFixture.page.locator("//input[@formcontrolname='min_quantum']").fill('');
await pageFixture.page.locator("//input[@formcontrolname='min_quantum']").type(minQuantumValue1);

        } catch (error) {
            console.log("Catching...");
            await pageFixture.page.evaluate((minQuantumValue1) => {
                document.querySelector('input[placeholder*=Min]').value = minQuantumValue1;
                document.querySelector('input[placeholder*=Min]').value = " ";
                document.querySelector('input[placeholder*=Min]').value = minQuantumValue1;
            }, minQuantumValue1);
        }

Here I am faced another issue. I was able to fill the field but after that the place response button is disabled.

7. pressSequentially
   await this.page.locator("//input[@formcontrolname='min_quantum']").pressSequentially(minQuantumValue1);
   On trying this approach, error message is displayein the console as:
   Test timeout of 160000ms exceeded.

   Error: locator.pressSequentially: Test timeout of 160000ms exceeded.
   Call log:

• waiting for locator('//input[@formcontrolname='min_quantum']')
  at ..\pages\DashboardCFP.js:412

Environment

OS: windows11 

Binaries:
  Node: 20.9.0
  npm: 10.2.0
npmPackages:
  @playwright/test: 1.41.2

[yury-s]

Please share a repro along with the web page that we could run locally to reproduce the problem.

[yury-s]

We need more information to act on this report. Please file a new one and link to this issue when you get back to it!

[guianino]

I have a same problem only in Firefox. Did you find any solution?