如果在所有select
个元素中都存在name
属性,则可以使用wildcard selectors in css来匹配动态值.类似于:
await page.locator('select[name^="ship[0]["][name$="[address]"]').selectOption('24553');
What it means?个
select[name^="ship[0]["][name$="[address]"]
-以name
属性以ship[0]
开头、以[address]
结尾的所有select
元素为目标.
下面,我在html
和css
中创建了一个小示例,它描述了它以预期的select
为目标,并对其应用了样式.在剧作家中,您可以使用它来定位您的元素.
select[name^="ship[0]["][name$="[address]"] {
/*Try changing above to select[name^="ship[1]["][name$="[address]"].
for applying style to second select. */
width: 100%;
max-width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
appearance: none;
background-color: #fff;
margin-bottom: 10px;
}
select:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
<select name="ship[0][596211][address]" id="ship_0_596211_address" class="" title="">
<option value="24551">Address 1</option>
<option value="24552">Address 2</option>
<option value="24553">Address 3</option>
</select>
<select name="ship[1][596211][address]" id="ship_1_596211_address" class="" title="">
<option value="24551">Address 5</option>
<option value="24552">Address 6</option>
<option value="24553">Address 7</option>
</select>