![](/img/trans.png)
[英]Puppeteer loop table rows - select dropdown option on each row "Option "P" for parameters
[英]Puppeteer Select Table row/option
處理一些代碼,它將 select 從下拉菜單中選擇一個選項后構建一個表格選項。 無權訪問 github atm 來檢查 puppeteer 文檔,所以我正在尋找如何調整類似於let optionValue = await page.$$eval('option', options => options.find(o => o.innerText === "Quality")?.value)
await page.select('#selDept', optionValue);
為了 select 使用“Stephen_Test”或隱藏單元格測量 id“1640”的 id 標簽或 innerText 的正確表格行。 我相信選擇度量 id 1640 會更好,這樣我還可以將該 id 保存為變量,如果需要,以后可以在項目的其他地方使用。 我只是沒有使用 nodeJS/puppeteer 的經驗,不知道如何將這條線調整為我正在尋找的內容,因此不勝感激。
當前的木偶代碼
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.authenticate({'username': username, 'password': password});
await page.goto('http://10.10.4.80/index-test-sh.html') //this is an intranet site for the company I work at
await page.waitForTimeout(4000);
await page.waitForSelector('#selDept');
await page.waitForTimeout(4000);
let optionValue = await page.$$eval('option', options => options.find(o => o.innerText === "Quality")?.value)
await page.select('#selDept', optionValue);
await page.waitForTimeout(4000);
let measureValue = await page.$$eval('td', td => td.find(t => t.innerText === "Stephen_Test")?.value)
await page.select('#Output', measureValue);
await page.waitForTimeout(4000);
//await browser.close();
})();
表是用這個循環構建的:
for (var i = 0; i < arr.length; i++) {
txtTable = txtTable + "<tr id='row" + i + "'>"; //altered this to have unique row ID's
txtTable = txtTable + "<td style='width:30%;'>" + arr[i].departmentName + "</td>";
txtTable = txtTable + "<td id='measureId" + arr[i].measureId + "' style='display:none; width:10%;'>" + arr[i].measureId + "</td>"; //altered this to include an id using measureId
txtTable = txtTable + "<td style='width:40%;'>" + arr[i].qmsMeasure + "</td>";
txtTable = txtTable + "<td style='width:20%;'>" + arr[i].measureSltOwner + "</td>";
txtTable = txtTable + "</tr>";
};//End Loop
選擇選項后生成的HTML (大約10行,只顯示我要選擇的那一行)
<div class="OptionTable DisplayScrollBar">
<table id="Output">
<thead>
<tr>
<th style="width: 30%;">Department Name</th>
<th style="width: 10%;display:none;">Report ID</th>
<th style="width: 40%;">Measure Name</th>
<th style="width: 20%;">SLT Measure Owner</th>
</tr>
</thead>
<tbody>
<tr id="row0">
<td style="width:30%;">Quality</td>
<td id="measureId1640" style="display:none; width:10%;">1640</td>
<td style="width:40%;">Stephen_Test</td>
<td style="width:20%;">null</td>
</tr>
</tbody>
</div>
在第二天以全新的開始回到這個問題之后,這是我完成任務的方式:
try {
await page.$("#measureId1640");
console.log("It exists!");
} catch {
console.log("no dice");
}
let measureId = await page.$$eval('td', td => td.find(t => t.innerText === "1640")?.id); // same as optionValue line, this time we look for 1640, and then return the id attribute of that element
console.log(measureId);
await page.click('#row0')
首先,我設置了一個 try 語句,讓我知道表中是否存在所需的度量/報告。
接下來,我設置了一個$$eval
來查看td
標簽類型(我知道這就是$$eval
語句的這一部分現在的含義),並且對於每個標簽,它將使用.find
function 來查找標簽使用1640
的innerText
,當它找到這個時, ?.id
讓它返回該標簽的 id。 如果需要,這使我可以在將來使用 measureId。
完成后,我使用page.click('#row0')
到 select 對應的行(我對整行使用#row0
,而不是嘗試使用單個單元格的內部 id),這會帶來該報告的正確信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.