剧作家打字稿中未单击元素

Question

我是 Playwright 和 Typescript 的新手。我只是尝试单击一个简单的下拉列表作为我的自动化测试的一部分，但该元素没有被单击。

这是元素的 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 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>

这是我点击它的代码

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

当我单步执行时，它只是说“等待......”，但实际上并没有单击该元素。 我做错了什么？

以下截图

Answer 1

不要

await

定位器，

await

行动：

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

如果这在您的实际网站上不起作用，那么该网站除了您共享的 HTML 之外还有更多内容，并且需要更多上下文才能提供有效的答案。