Rayrun
← Back to Discord Forum

button onclick not working

insidiousssssposted in #help-playwright
Open in Discord
insidiousssss
insidiousssss

what could be wrong here?

This thread is trying to answer question "Why is the button click in a Playwright test not being executed, and how can it be resolved?"

9 replies
insidiousssss
insidiousssss
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);
});
insidiousssss
insidiousssss

console.log

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

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

insidiousssss
insidiousssss

it is running once every 30 min, why lol

just try to wait for the element before clicking.

insidiousssss
insidiousssss

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

dirvinautomation_16636

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 🙈

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.