Element not being clicked in Playwright Typescript

Question

I am new to Playwright and Typescript. I am just trying to click a simple dropdown as part of my automated test but the element doesn't get clicked.

Here is the HTML of the element

<div class="rz-dropdown valid form-control" onmousedown="Radzen.activeElement = null" style="width: 228px; height: 55px; border-radius: 1rem; border: none #6E33FF; background-color: #F3F4F6;" tabindex="101" id="NavPartnerSelector" _bl_f3dcba6d-438e-4553-a61b-d5e840cf68b8=""><!--!-->
        <div class="rz-helper-hidden-accessible"><!--!-->
            <input aria-haspopup="listbox" readonly="" type="text" tabindex="-1" aria-label="wpart_m4qzr9x"><!--!-->
        </div><!--!-->

            <span class="rz-dropdown-label rz-inputtext" style="width:100%;"><!--!-->
                <div class="d-flex align-items-center text-truncate" style="height: 40px; " b-1m6v1ajx9g="">Regus UK</div><!--!-->
            </span><!--!-->
<!--!-->
        <!--!--><div class="rz-dropdown-trigger rz-corner-right">
            <span class="rz-dropdown-trigger-icon  rzi rzi-chevron-down"></span>
        </div>

        <div id="popup-NavPartnerSelector" class="rz-dropdown-panel    " style="display:none; box-sizing: border-box"><!--!-->
            <div class="rz-dropdown-items-wrapper" style="height: 600px; border-radius: 1rem; background-color: white; overflow-anchor: none;"><!--!-->
                    <ul class="rz-dropdown-items rz-dropdown-list" role="listbox" _bl_b330b560-8154-446d-bfc7-a8551e92a826=""><!--!-->
<!--!--><div style="height: 0px; flex-shrink: 0;" _bl_65813d22-3c18-47ee-8ee8-39b7ab1c1a56=""></div><div style="height: 0px; flex-shrink: 0;" _bl_c79bb64a-fe84-4ec3-a8c8-08c08e98f09b=""></div>                    </ul><!--!-->   
            </div><!--!-->
        </div><!--!-->
    </div>

Here is my code to click it:

import { Page } from 'playwright';

export default class PMSIntegrations {
private page: Page;

constructor(page: Page) {
    this.page = page;
}

async navigateToIntegrations()
  {
    //click settings dropdown and select Integrations
    const settingsDropdown = await this.page.locator('#NavPartnerSelector');
    settingsDropdown.click();
  }
}

It just says "waiting...." when I step through and doesn't actually click the element. What am I doing wrong?

Screenshot below

Answer 1

Don't await the locator, await the action:

import {test} from "@playwright/test"; // ^1.42.1

const html = `
<div class="rz-dropdown valid form-control" onmousedown="Radzen.activeElement = null" style="width: 228px; height: 55px; border-radius: 1rem; border: none #6E33FF; background-color: #F3F4F6;" tabindex="101" id="NavPartnerSelector" _bl_f3dcba6d-438e-4553-a61b-d5e840cf68b8=""><!--!--></div>`;

test("div can be clicked", async ({page}) => {
  await page.setContent(html);
  const settingsDropdown = page.locator("#NavPartnerSelector");
  await settingsDropdown.click();
});

If this doesn't work on your actual website, then there's more to the site than the HTML you've shared, and more context will be necessary to provide a working answer.

Often, elements can't be clicked because they're not visible or actionable due to arbitrary JS/CSS behavior, or they're in an iframe, or the page has a cloudflare block and isn't serving up the DOM you see as a human visitor.

Occasionally, force clicking or using an untrusted browser click can get thing moving, but whether this is good practice depends on whether you're testing or scraping.