我正在尝试使用 Playwright 从第三个选择 HTML 元素中定位并提取所有选项/文本并将其推送到数组中？我尝试了不同的替代方案，page.locate()、page.$$eval() 和 page.evaluate()。我的目标是循环第三个选择元素中的选项并从每个选项中获取数据。
"playwright": "^1.40.1"
const { chromium } = require("playwright");
const url = `<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="app" data-v-app="">
<div class="f-container fixed-hf">
<header>
HEADER
</header>
<main class="flex flex-col main mx-0 sm:mx-32">
<div class="w-full">
<div class="flex justify-end p-1 border border-slate-300 shadow-lg overflow-auto">
HEADER BUTTONS
</div>
</div>
<div class="flex flex-wrap h-full">
<div class="w-full md:w-3/12 border-x-2 border-gray-300 bg-slate-100">
<div class="flex flex-col p-2 m-1 border border-slate-300 shadow-lg">
<div class="w-full sm:w-12/12 px-1">
<h2>Other links</h2>
</div>
</div>
<div class="flex flex-col p-2 m-2">
<div>
<label for="first_select">First Select:</label>
<select class="select">
<option value="[object Object]">One</option>
<option value="[object Object]">Two</option>
<option value="[object Object]">Three</option>
<option value="[object Object]">Fourth</option>
<option value="[object Object]">Five</option>
<option value="[object Object]">Six</option>
<option value="[object Object]">Seven</option>
</select>
</div>
<div class="w-full">
<label for="second_select">Second Select:</label>
<select class="select">
<option value="[object Object]">A</option>
<option value="[object Object]">B</option>
<option value="[object Object]">C</option>
<option value="[object Object]">D</option>
<option value="[object Object]">E</option>
<option value="[object Object]">F</option>
<option value="[object Object]">G</option>
<option value="[object Object]">H</option>
<option value="[object Object]">Y</option>
<option value="[object Object]">J</option>
<option value="[object Object]">K</option>
<option value="[object Object]">L</option>
<option value="[object Object]">M</option>
<option value="[object Object]">N</option>
<option value="[object Object]">O</option>
<option value="[object Object]">P</option>
<option value="[object Object]">Q</option>
<option value="[object Object]">R</option>
</select>
</div>
<div class="w-full">
<label for="third_select">Third Select:</label>
<select class="select">
<option value="[object Object]">11</option>
<option value="[object Object]">22</option>
<option value="[object Object]">33</option>
<option value="[object Object]">44</option>
<option value="[object Object]">45</option>
<option value="[object Object]">46</option>
<option value="[object Object]">47</option>
<option value="[object Object]">48</option>
<option value="[object Object]">49</option>
<option value="[object Object]">50</option>
<option value="[object Object]">51</option>
<option value="[object Object]">52</option>
<option value="[object Object]">53</option>
<option value="[object Object]">54</option>
<option value="[object Object]">55</option>
<option value="[object Object]">56</option>
<option value="[object Object]">57</option>
<option value="[object Object]">58</option>
<option value="[object Object]">59</option>
<option value="[object Object]">60</option>
</select></div>
</div>
</div>
<div class="w-full md:w-9/12">
<div>
<div class="flex flex-col p-2 border border-slate-300 m-1 shadow-lg">
<div>
<div class="w-full">
<div class="row">
<div>
<div class="w-full">
<div class="flex flex-row justify-between">
<div class="w-3/4">
<div class="p-6"><!---->
<div>
<div class="w-full">
<h1 class="titulo">Data
Experimental</h1>
</div>
<div class="row"><!---->
<h2 class="sub-titulo">Total uno</h2>
<h3 class="detalles"></h3>
<p></p>
</div>
<div class="relative inline-block text-left float-left">
<div></div>
</div>
</div>
</div>
</div>
<div class="w-1/6">
<div class="mb-4"></div>
</div>
</div>
</div>
<div class="w-full">
<table class="table">
<div>HERE COME THE DINAMIC DATA</div>
</table>
</div>
</div>
</div>
</div>
<div class="w-full"></div>
<div class="w-full"></div>
<div class="w-full"></div>
</div>
</div>
<div class="flex flex-wrap justify-center pt-8 mt-8">
<div class="flex flex-wrap w-full justify-center float">
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="flex justify-center h-14 pt-3">
<p>Footer</p>
</div>
</footer>
</div>
</div>
</body>
</html>`;
(async () => {
const browser = await chromium.launch({ headless: false });
const context = await browser.newContext();
const page = await context.newPage();
await page.goto(url);
const selectLocator = await page.locator(
"div.flex.flex-col.p-2.m-2 > div:nth-child(5) > select"
);
console.log("Number of elements:", selectLocator.count());
await browser.close();
})();
鉴于此 HTML...
<html>
<head>
<title></title>
</head>
<body>
<select>
<option value="0">S1-A</option>
<option value="1">S1-B</option>
<option value="2">S1-C</option>
</select>
<select>
<option value="0">S1-A</option>
<option value="1">S1-B</option>
<option value="2">S1-C</option>
</select>
<select>
<option value="0">S1-A</option>
<option value="1">S1-B</option>
<option value="2">S1-C</option>
</select>
</body>
</html>
...这（可能）对你有用...
import {test, expect} from '@playwright/test';
test('sandbox', async ({ page }, testInfo) => {
await page.goto('file://C:/development/playwright/tests/array-third-select.html');
var names = (await page.getByRole('combobox').nth(2).innerText()).split('\n');
var values = [];
for (const option of await page.getByRole('combobox').nth(2).getByRole('option').all())
values.push(await option.getAttribute('value'));
console.log(values);
console.log(names);
});
运气。