如何使用剧作家的 locator.selectOption 按标签进行多重 select

Question

我有一个 multiselect <select> 元素，我想通过标签 select 多个项目。我知道可以按值多select。

<select name="colors" id="colors" multiple="multiple" size=5>
  <option value="R">Red</option>
  <option value="O">Orange</option>
  <option value="Y">Yellow</option>
  <option value="G">Green</option>
  <option value="B">Blue</option>
  <option value="P">Purple</option>
</select>

鉴于上面的例子，我知道我可以做到 page.selectOption('#colors', ['R', 'G', 'B']); 并且能够 select 编辑红色、绿色和蓝色。但是如果我不知道值，而只知道标签文本，我可以做同样的事情吗？也许 page.selectOption('#colors', {label: ['Red', 'Green', 'Blue']});?

Answer 1

我没有看到这个问题是专门用这种方式问的。但我确实找到了我的答案，如果其他人应该寻找这个。

本质上，您将标签放入一个数组中。不是将您的文本放入与标签关联的数组中。

page.selectOption('#colors', [{label: 'Red'}, {label: 'Green'}, {label: 'Blue'}]

而且，假设您只有要选择的值数组 const colors = ["Red", "Green", "Blue"];

您可以执行以下操作：

page.selectOption('#colors', colors.map(function(color, i) { return { label: color }; });

如何使用剧作家的 locator.selectOption 按标签进行多重 select

how to multi-select by label using playwright's locator.selectOption

playwright