如何 select Playwright UI 测试中的自定义下拉选项

Question

我正在进行端到端 UI 测试，当我尝试 select Harmony web UI 组件的选项时（), 剧作家无法识别客户标签，它错误地说不是 select 选项。

我也无法使用 Headless Recorder 记录下拉 select 选项，如果有人遇到过此类问题，请告诉我.

HTML Select 代码： {

    <ext-support_he-option selected="" value="" aria-selected="true" class="selected" role="option" id="option-14" aria-posinset="1" aria-setsize="9"> Select a Workspace </ext-support_he-option>
  
         
    <ext-support_he-option value="accountPlans" aria-selected="false" role="option" id="option-15" aria-posinset="2" aria-setsize="9"> Account Plans </ext-support_he-option>
   
    <ext-support_he-option value="accounts" aria-selected="false" role="option" id="option-16" aria-posinset="3" aria-setsize="9"> Accounts </ext-support_he-option>
   
    <ext-support_he-option value="contacts" aria-selected="false" role="option" id="option-17" aria-posinset="4" aria-setsize="9"> Contacts </ext-support_he-option>
   
    <ext-support_he-option value="engagements" aria-selected="false" role="option" id="option-18" aria-posinset="5" aria-setsize="9"> Engagements </ext-support_he-option>
   
    <ext-support_he-option value="leads" aria-selected="false" role="option" id="option-19" aria-posinset="6" aria-setsize="9"> Leads </ext-support_he-option>
   
    <ext-support_he-option value="opportunities" aria-selected="false" role="option" id="option-20" aria-posinset="7" aria-setsize="9"> Opportunities </ext-support_he-option>
   
    <ext-support_he-option value="partners" aria-selected="false" role="option" id="option-21" aria-posinset="8" aria-setsize="9"> Partners </ext-support_he-option>
   
    <ext-support_he-option value="userProvisioning" aria-selected="false" role="option" id="option-22" aria-posinset="9" aria-setsize="9"> User Provisioning </ext-support_he-option>
  <!--fast-eovm3s:5-->
      </ext-support_he-select> }

请参考下面给出的UI截图。

Answer 1

您可以先单击下拉菜单，然后单击所需的下拉项。

await page.locator(#workspace-dropdown).Click();
await page.waitForSelector("xpath=//ext-support_he-option[@value='accounts'");
await page.locator("xpath=//ext-support_he-option[@value='accounts'").Click();

Answer 2

是的，我也从朋友那里得到了提示，这可以代替使用“select 选项”调用。如果有人想使用它，我只是把我的代码作为参考。

  var workSpaceDropdown = page.locator('#workspace-dropdown');
  await workSpaceDropdown.click();
  page.keyboard.press('ArrowDown');

详情请见下方。 https://playwright.dev/docs/api/class-keyboard#keyboard-down

如何 select Playwright UI 测试中的自定义下拉选项

how to select a custome dropdown option in Playwright UI test

html

testing

playwright

ui-testing

playwright-test