Element not found but codegen determines element correctly

Question

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')

The locator is correct (verified using codegen and developer tools of the browser).

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>

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()
    })
});

The window:

PlayWright´s codegen determines the correct label. The same behavior happens at label Grouping. Code, Description and Nation are labels too but they were verified correctly.

I tested using locator(/Row#3-Label/) but want to rely on PlayWright´s getBy... and avoid locator().

Answer 1

The correct menu was not opened. It fetched a different item which has the name Operational Capability. Nevertheless, this was not the main problem.

The HTML displays:

<a id="z_d6" class="catalog-button z-a" tid="[label=Ope­ration]" href="javascript:;">Ope­ration</a>

But the label has a soft hyphen Ope­ration that is not visible. Only codegen detects it by a red dot:

The IDE can only use it when I copy and paste the generated code, which results in: