[BUG] Test failure in GH actions workflow. But, works locally. Post redirect to a page, the page.fill times out waiting for the input element to be enabled

Context:

• Playwright Version: [1.25.2]
• Environment: In GitHub actions workflow sandbox
• Node.js version: [ 14.9.3]
• Browser: [Chromium]
• Extra: it works as expected locally; but, fails only in GH workflow

npx envinfo --preset playwright --markdown outputs -> in GH action workflow sandbox (redacted few info)

## System:
 - OS: Linux 5.15 Ubuntu 20.04.4 LTS (Focal Fossa)
 - Memory: 20.06 GB / 30.[9](<REDACTED_INFO>)0 GB
 - Container: Yes
## Binaries:
 - Node: 14.19.3 - ~/actions-runner/_work/_tool/node/14.19.3/x64/bin/node
 - Yarn: 1.22.19 - /usr/local/bin/yarn
 - npm: 6.[14](<REDACTED_INFO>).17 - ~/actions-runner/_work/_tool/node/14.19.3/x64/bin/npm
## Languages:
 - Bash: 5.0.[17](<REDACTED_INFO>) - /usr/bin/bash

Code Snippet

redacted and reduced code to make it simpler to follow on the issue;

import { expect, Page } from '@playwright/test';

export class E2EHelperActions {
  readonly page: Page;

  constructor(page: Page) {
    this.page = page;
  }

  async completeLogin({ oktaUsername, oktaPassword }): Promise<void> {
    /*
    Scenarios happened so far using tests: 
      Loads the app
      Clicks the login button -> redirected to login provider page
      Clicks OKTA login provider -> redirected to okta login flow
      Inputs username -> click next -> another nav within okta
     */

    await this.page.waitForLoadState('domcontentloaded');
    await this.page.fill('input[name="username"]', oktaUsername);
    
     // after this click, ideally, page gets redirected to another page 
     //   and contains username & password input fields which are editable
     await this.page.click('text=Next');

    // tried waitForLoadState, waitForNavigation and used waitForTimeout too; but, nothing worked so far
    await this.page.waitForLoadState('domcontentloaded');
    // this is the place where error happened, PW is trying to input username, but username input is disabled
    await this.page.fill('input[name="username"]', oktaUsername);
    await this.page.fill('input[name="password"]', oktaPassword);
    await this.page.click('input:has-text("Sign In")');
   ...... 
}

Describe the bug

Have added inline comments in above code to better explain things in steps.

tldr; after a page redirect, page.fill to input values on an input field gets timed out in waiting for the input element to be editable. But, for some reasons, the input field remains disabled even though using waitForNavigation or waitForLoadState or increasing timeouts in playwright config.

This is not happening locally and issue only happens in GH sandbox.

any thoughts?

Attaching screenshots (trace viewer)

BEFORE action

AFTER action

[vivekVells]

Based on this: https://devforum.okta.com/t/how-to-prevent-disabling-username-text-box-when-idp-discovery-turned-on-for-okta-signin-widget/20905

it looks like the OKTA is having some sort of routing rules mechanism to handle the UI response - to either disable username or not in the login flow. (this is the reason why locally, the form input is enabled and able to page.fill input the okta username while form input is disabled in GH sandbox).

tldr; the issue is not with playwright; its the way the UI responds in okta login flow based on environment (local vs GH sandbox) - so, planned to add a conditional check to check if element is disabled & contains right username, proceed to input password & complete the login flow.

closing this issue.

but, thanks for looking into this, @mxschmitt.

[vivekVells]

What does looking at the DOM in Trace Viewer look like, is it editable?

its shown uneditable at the end “AFTER” in above screenshot: https://user-images.githubusercontent.com/25471383/190490071-127b56e3-9535-4c36-89c7-7df385b83d79.png

In “BEFORE” action state, the input element is not even shown; please refer screenshot above: https://user-images.githubusercontent.com/25471383/190490028-25d4f432-1e7f-44b6-88e0-97e4f0836513.png