如何使用剧作家下拉菜单获得选中的选项?

Question

我正在使用c#语言绑定的剧作家。

HTML例子:

<select id="txtType" name="Type" class="form-control">
<option>Blog Posts</option>
<option>Books</option>
<option>Presentations</option>
<option>Videos</option>
<option>Podcasts</option>
<option>Examples</option>
</select>

我知道我可以使用Page.SelectOptionAsync为下拉菜单设置选中的选项，但是我如何获得当前选中的选项?

当我查看下拉菜单的所有属性时，我看不出ElementHandles有什么不同。

Answer 1

<select id="element_id">
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<select>

For NodeJS剧作家

从下拉菜单中获取value(2)选项:

await page.$eval('#element_id', sel => sel.value)

从下拉菜单中获取选中的选项text(" option 2"):

await page.$eval('#element_id', sel => sel.options[sel.options.selectedIndex].textContent)

---

对于c#，只需将第二个参数用引号括起来:

await page.EvalOnSelectorAsync<string>("#element_id", "sel => sel.value")
await page.EvalOnSelectorAsync<string>("#element_id", "sel => sel.options[sel.options.selectedIndex].textContent")

Answer 2

为了完整起见，在我看来，这里有一个更好的NodeJS剧作家选择，使用定位器评估函数:

test('should render correctly', async () => {
// act
await page.goto('http://localhost:' + localPort);
// assert
async function extractSelectedDisplayedValue(selectedOption) {
return selectedOption.evaluate(sel => sel.options[sel.options.selectedIndex].textContent);
}
const selectedImageOption = page.locator('#imageSelect');
expect(await extractSelectedDisplayedValue(selectedImageOption)).toBe('Option 1 ');
}, 60_000)

(我知道这个问题是关于c#的，但是当你搜索这个问题时，它会弹出，我在NodeJs中的尝试把我带到这里。)

Answer 3

你可以使用EvalOnSelectorAsync，传递一个CSS选择器，函数期望该元素并返回该元素的值:

await page.EvalOnSelectorAsync<string>("#txtType", "el => el.value")