I have a problem which I don´t understand.

I get the following error when I execute the test in headless mode.

Error: Timed out 5000ms waiting for expect(locator).toBeVisible()

Locator: locator('div.flex-modal-window.z-window').getByText('Classification')
Expected: visible
Received: <element(s) not found>
Call log:
  - expect.toBeVisible with timeout 5000ms
  - waiting for locator('div.flex-modal-window.z-window').getByText('Classification')

However, the locator is correct. I verified it by using codegen and developer tools of the browser.

Here is the element

<span id="z_ae0" style="width:100%;" class="mandatory z-label" tid="Borderlayout-Center-Div-[id=content]-Window-Vlayout-Tabbox-[id=tabbox]-Tabpanels-Tabpanel-Vlayout-Idspace-[id=table]-Idspace-Groupbox-[id=groupbox]-Div-Grid-Rows-Row#3-Label-[=Classification]">Classification</span>

My POM operation.ts

export class Operation extends BasePOMCatalogManagement implements GenericVerifications {
    readonly label_code: Locator
    readonly label_description: Locator
    readonly label_nation: Locator
    readonly label_classification: Locator
    readonly label_grouping: Locator
    readonly input_code: Locator
    readonly input_description: Locator
    readonly lookup_field_nation: Locator
    readonly combobox_classification: Locator
    readonly input_grouping: Locator

    constructor(page: Page) {
        super(page);
        this.label_code = this.dialog.getByText("Code")
        this.label_description = this.dialog.getByText("Description")
        this.label_nation = this.dialog.getByText("Nation")
        this.label_classification = this.dialog.getByText("Classification")
        this.label_grouping = this.dialog.getByText("Grouping")
        this.input_code = this.dialog.getByTestId(/Row-Idspace-Textbox/)
        this.input_description = this.dialog.getByTestId(/Row#1-Idspace-Textbox/)
        this.lookup_field_nation = this.dialog.getByTestId(/Row#2-Idspace-Textbox/).getByRole('textbox')
        this.combobox_classification = this.dialog.getByTestId(/Row#3-Combobox/)
        this.input_grouping = this.dialog.getByTestId(/Row#4-Combobox/)
    }

    async verify_properties(): Promise<void> {
        await expect(this.label_code).toBeVisible()
        await expect(this.label_description).toBeVisible()
        await expect(this.label_nation).toBeVisible()
        await expect(this.label_classification).toBeVisible()
        await expect(this.label_grouping).toBeVisible()
        await expect(this.label_checkbox_in_use).toBeVisible()
    }
}

The test operation.spec.ts

import {test} from '../../../fixtures/catalog_management/atr/operation'
import {login} from "../../../lib/shortcut";

test.describe('Operation', () => {

    test.beforeEach(async ({page}) => {
        await login(page, process.env.EURALL)
    })

    test('has items', async ({operation, action_toolbar}) => {
        await action_toolbar.button_insert.click()
        await operation.verify_properties()
    })
});

This is the window I´m testing

When I verified whether the locator is correct I used PlayWright´s codegen and it determines the correct label. The same behavior happens at label Grouping as well. Code, Description and Nation are labels too but they were verified correctly.

Does anyone have an idea?

I tested it by using a different locator locator(/Row#3-Label/) and it work but I would like to rely on PlayWright´s getBy... approaches and avoid using locator() as much as possible.