button onclick not working

test('Accordion Component', async ({page}) => {
    const header: string | null = await page.locator(`[data-test="accordion-0"]`).textContent();
    expect(typeof header).toBe('string');
    console.log("header", header);
    const button: Locator = page.locator(`[data-test="accordion-button-0"]`);
    await button.click();
    const details: Locator = page.locator(`[data-test="accordion-details-0"]`);
    console.log("details", details);
    const isDetailsVisible: boolean = await details.isVisible();
    console.log("isDetailsVisible", isDetailsVisible);
});

console.log

header Section 1 +   
details locator('[data-test="accordion-details-0"]')
isDetailsVisible false

it does point to the button but is click is not executed

it is running once every 30 min, why lol

just try to wait for the element before clicking.

I tried to add waitFor, the issue still persists, hopefully it will be fixed step-by-step

please try to see if await button.click({delay : 500}); helps

I just had a similar issue with an AntDesign Collapse component. The transitioning element would cause playwright to "miss" the element I was trying to interact with.

Not saying this will work for you, but my solution was to find the element by its transitioning class name and wait for a hidden state. Most of the libraries that handle accordion-type elements will give the closed, transitioning, and opened states of the element different classes. In my case, the transitioning class was ant-motion-collapse-enter-active, so I just waited for that to be hidden before continuing.

Ex:

const transitioningList = page.locator(".ant-motion-collapse-enter-active");
await transitioningList.waitFor({ state: "hidden" });

Of course, if that doesn't work, there's always page.waitForTimeout 🙈