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

Question

Issue Overview

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)
<input _ngcontent-ng-c2430308819="" type="text" formcontrolname="min_quantum" class="form-control font-13 p-2 ng-pristine ng-valid ng-star-inserted ng-touched" placeholder="Min. QTM (99998 MW)">

Expected behaviour

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

Actual behaviour

The fill action is not working in Firefox browser.

The error message 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);

Workarounds I tried

I attempted seven workarounds described below.

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 with 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 displayed in 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