[BUG] Enldess scroll UP-DOWN instead of click action

[maxrexfax]

System info

• Playwright Version: [v1.00]
• Operating System: [Ubuntu 22.04]
• Browser: [Chromium]
• Other info:

Source code

[We will only be able to work on the issues that we can reproduce.]

[Please provide a self-contained example in a form of a snippet, archive or a repository.]

[Repro scenario can't be large or have external dependencies.]

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

test("Complex test - Create Lead and check data in client and vehicle", async ({ page }) => { test.setTimeout(360 * 1000); await page.setViewportSize({width: 1500, height: 900}); await page.goto("https://epple.dms.demo.symfio.de/signin");

await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(2000);

const inputLoginData = await page.locator("input#register_username");
await inputLoginData.fill("[email protected]");

const inputPassword = await page.locator("input#register_password");
await inputPassword.fill("***");

const btnSubmit = await page.locator("button[type=submit]");
await btnSubmit.click();
await page.waitForTimeout(1000);

await page.waitForLoadState('domcontentloaded');
await page.getByTestId('parent_sidebar.vehicles_vehicles_location').click();
await page.waitForTimeout(1000);
await page.getByTestId('vehicles-inventory').click();
await page.waitForTimeout(1000);

await page.setViewportSize({width: 1500, height: 900});
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1000);
// Create new vehicle
const createNewVehicleButton = await page.getByTestId('vehicle_create_button');
await expect(createNewVehicleButton).toBeAttached();
expect(await createNewVehicleButton.count() > 0).toBeTruthy();
await createNewVehicleButton.click();

await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1000);
await page.getByTestId('vehicle_type_auto').click();
await page.waitForTimeout(1000);

//check if alert appeared
await closePopupWithPromptingToCreateOldItem(page);

const divUsages = await page.locator('div[id="usage"]');
if (await divUsages.count() > 0) {
    await divUsages.locator('input[value="New"]').click();
    await page.waitForTimeout(500);
    // manual vehicle creation if was asked
    const divChangeManualOrVinContainer = await page.locator('div[class="ant-tabs-nav-list"]');
    expect(divChangeManualOrVinContainer).not.toBeNull();
    await expect(divChangeManualOrVinContainer).toBeAttached();
    expect(await divChangeManualOrVinContainer.count() > 0).toBeTruthy();
    if (await divChangeManualOrVinContainer.count() > 0) {
        const navTabs = await divChangeManualOrVinContainer.locator('.ant-tabs-tab');
        if (await navTabs.count() > 1) {
            await divChangeManualOrVinContainer.locator('.ant-tabs-tab').nth(1).click();//usual admin panel state - manual and VIN
            await page.waitForTimeout(500);
        } else {
            await page.getByRole('tab', { name: 'Manuelle Eingabe' }).click();//if only one found - manual input
        }
    }
    await fillModelMark(page);
    await page.getByTestId('sy_form_view_save').click();
    await page.waitForLoadState('domcontentloaded');
    await page.waitForTimeout(1000);
}

const inputSiteId = await page.locator('input[id="site_id"]');
expect(inputSiteId).not.toBeNull();
await expect(inputSiteId).toBeAttached();
expect(await inputSiteId.count() > 0).toBeTruthy();
await inputSiteId.click();
await page.waitForTimeout(1000);
const siteIdToClick = await page.locator('div[class="ant-select-item ant-select-item-option ant-select-item-option-active"]');
expect(siteIdToClick).not.toBeNull();
await expect(siteIdToClick).toBeAttached();
expect(await siteIdToClick.count() > 0).toBeTruthy();
await siteIdToClick.click();
await page.waitForTimeout(500);

//!!! const inputFuelTypes = await page.locator('input#fuel');// - This is it - unclicalble item await inputFuelTypes.click(); });

export async function fillModelMark(page: Page) { await page.locator("#make").click(); await page.waitForTimeout(500); await page.locator("#make").fill("Audi"); await page.waitForTimeout(500); await page.getByTitle('Audi').getByText('Audi').click(); await page.locator("#model").click(); await page.waitForTimeout(500); await page.locator("#model").fill("A3"); await page.waitForTimeout(500); await page.getByTitle('A3').getByText('A3').click(); await page.waitForTimeout(500); const subModelInput = await page.locator("#submodel_name"); if (await subModelInput.count() > 0) { await subModelInput.click();await page.waitForTimeout(500); await page.locator("#submodel_name").fill("A3 1.2 TFSI Ambiente"); await page.waitForTimeout(500); await page.getByText('A3 1.2 TFSI Ambiente').nth(1).click(); } return true; }

export async function closePopupWithPromptingToCreateOldItem(page: Page) { const btnClearUserAsFlag = await page.getByTestId('wizard_cache_alert_clear'); let countOfBtnClearUserAsFlag = await btnClearUserAsFlag.count(); if (countOfBtnClearUserAsFlag > 0) { expect(btnClearUserAsFlag).not.toBeNull(); await btnClearUserAsFlag.click(); await page.waitForLoadState('domcontentloaded'); await page.waitForTimeout(1000); } }

Expected

I expect field is clicked, dropdown list appears

Actual

Infinite scroll UP-DOWN.

https://github.com/microsoft/playwright/assets/27776358/fea6d55d-a7a6-4597-8385-465eb5a3be9c https://youtu.be/CxyUIs441F8

[pavelfeldman]

Thank you for your report. It unfortunately is quite involved. For us to be able to reproduce and address the issue, we are looking for the minimal reliable repro (smallest possible context). In your script you are also using waitForTimeout, which strongly suggests that your script is inherently flakey - we can't get reliable repros from the scripts containing waitForTimeout, using this method for testing is strongly discouraged.

[maxrexfax]

The frontend of the site runs on React, so using waitForTimeout is a forced measure. I stop the code and wait for react to load some elements or replace their content, which happens on the page already after the await page.waitForLoadState('domcontentloaded') event has occurred;

[maxrexfax]

If you delete all lines containing await page.waitForTimeout(...), the same error with infinite scrolling will occur even earlier - at the stage await subModelInput.click()

[pavelfeldman]

The frontend of the site runs on React, so using waitForTimeout is a forced measure. I stop the code and wait for react to load some elements or replace their content, which happens on the page already after the await page.waitForLoadState('domcontentloaded') event has occurred;

You don't need neither waitForTimeout nor waitForLoadState for Playwright to work with React. Furthermore, these are strongly discouraged.

If you delete all lines containing await page.waitForTimeout(...), the same error with infinite scrolling will occur even earlier - at the stage await subModelInput.click()

I get stuck on the login form - credentials are not valid for me. In cases like this one we require that a reduced reproducible code is provided as a part of the bug.

await page.locator (side note)

Please don't await locators.

[maxrexfax]

Tell me please how can i send you credentials (password) in non public way?

[pavelfeldman]

We are not accepting repros with credentials. We've restructured our bug template so the expectations were clear, we now only accept self-contained repositories with the reproductions. Please follow the template to make sure we can act on the issue.

[maxrexfax]

What template should i follow? In the issue create form?