136 lines
4.5 KiB
JavaScript
136 lines
4.5 KiB
JavaScript
import { chromium } from 'playwright';
|
||
import { config, datasets } from './config.js';
|
||
|
||
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||
|
||
console.log('打开订单页面，设置2024-11月，探测分页结构...');
|
||
|
||
const context = await chromium.launchPersistentContext(config.userDataDir, {
|
||
channel: 'chrome',
|
||
headless: false,
|
||
acceptDownloads: true,
|
||
downloadsPath: config.downloadDir,
|
||
});
|
||
|
||
const page = context.pages()[0] || (await context.newPage());
|
||
await page.goto(datasets.orders.url, { waitUntil: 'domcontentloaded' });
|
||
|
||
await page.waitForFunction(
|
||
(text) => document.body && document.body.innerText.includes(text),
|
||
datasets.orders.heading,
|
||
{ timeout: 60000 },
|
||
);
|
||
await sleep(3000);
|
||
|
||
// 设置日期到2024-11月（数据多的月份）
|
||
const trigger = page.locator('input[placeholder="结束日期"]');
|
||
await trigger.click();
|
||
await sleep(1000);
|
||
const panelEndInput = page.locator('.next-range-picker-panel-input-end-date input');
|
||
await panelEndInput.click();
|
||
await sleep(100);
|
||
await page.keyboard.press('Control+A');
|
||
await page.keyboard.type('2024-11-30', { delay: 30 });
|
||
await sleep(300);
|
||
const panelStartInput = page.locator('.next-range-picker-panel-input-start-date input');
|
||
await panelStartInput.click();
|
||
await sleep(100);
|
||
await page.keyboard.press('Control+A');
|
||
await page.keyboard.type('2024-11-01', { delay: 30 });
|
||
await sleep(300);
|
||
await page.keyboard.press('Enter');
|
||
await sleep(500);
|
||
await page.mouse.click(0, 0);
|
||
await sleep(300);
|
||
await page.keyboard.press('Escape');
|
||
await sleep(1000);
|
||
|
||
// 点查询
|
||
const queryBtn = page.locator('button:has-text("查询")').first();
|
||
await queryBtn.click();
|
||
await sleep(3000);
|
||
|
||
// 探测分页组件
|
||
const paginationInfo = await page.evaluate(() => {
|
||
const result = {
|
||
// 找所有 pagination 相关的元素
|
||
paginationContainers: [],
|
||
allButtons: [],
|
||
nextItems: [],
|
||
};
|
||
|
||
// 所有 pagination 容器
|
||
const containers = document.querySelectorAll('[class*="pagination"]');
|
||
containers.forEach((el, i) => {
|
||
result.paginationContainers.push({
|
||
index: i,
|
||
tag: el.tagName,
|
||
className: el.className.substring(0, 200),
|
||
childCount: el.children.length,
|
||
innerHTML: el.innerHTML.substring(0, 500),
|
||
});
|
||
});
|
||
|
||
// 所有带 next-btn 类名的按钮（在 pagination 内）
|
||
const btns = document.querySelectorAll('[class*="pagination"] button, [class*="pagination"] [role="button"], [class*="pagination"] .next-btn');
|
||
btns.forEach((el, i) => {
|
||
result.allButtons.push({
|
||
index: i,
|
||
tag: el.tagName,
|
||
text: el.innerText?.trim()?.substring(0, 50) || '',
|
||
className: el.className.substring(0, 200),
|
||
disabled: el.hasAttribute('disabled') || el.getAttribute('aria-disabled') === 'true',
|
||
ariaLabel: el.getAttribute('aria-label') || '',
|
||
});
|
||
});
|
||
|
||
// 找 next-next 类
|
||
const nextNextEls = document.querySelectorAll('.next-next, [class*="next-next"]');
|
||
nextNextEls.forEach((el, i) => {
|
||
result.nextItems.push({
|
||
index: i,
|
||
tag: el.tagName,
|
||
text: el.innerText?.trim()?.substring(0, 50) || '',
|
||
className: el.className.substring(0, 200),
|
||
disabled: el.hasAttribute('disabled'),
|
||
parentClass: el.parentElement?.className?.substring(0, 100) || '',
|
||
});
|
||
});
|
||
|
||
return result;
|
||
});
|
||
|
||
console.log('\n=== Pagination 容器 ===');
|
||
for (const c of paginationInfo.paginationContainers) {
|
||
console.log(`\n[容器 ${c.index}] <${c.tag}> children=${c.childCount}`);
|
||
console.log(` class: ${c.className}`);
|
||
console.log(` html: ${c.innerHTML.substring(0, 300)}`);
|
||
}
|
||
|
||
console.log('\n=== Pagination 内的按钮 ===');
|
||
for (const b of paginationInfo.allButtons) {
|
||
console.log(`[btn ${b.index}] <${b.tag}> text="${b.text}" disabled=${b.disabled} aria="${b.ariaLabel}" class="${b.className}"`);
|
||
}
|
||
|
||
console.log('\n=== next-next 元素 ===');
|
||
for (const n of paginationInfo.nextItems) {
|
||
console.log(`[next ${n.index}] <${n.tag}> text="${n.text}" disabled=${n.disabled} class="${n.className}" parent="${n.parentClass}"`);
|
||
}
|
||
|
||
// 再看看当前页码
|
||
const currentPage = await page.evaluate(() => {
|
||
const active = document.querySelector('.next-pagination-item.current, .next-pagination-list .current');
|
||
return active ? { text: active.innerText, class: active.className } : null;
|
||
});
|
||
console.log('\n当前页码:', currentPage);
|
||
|
||
// 看看总共多少条记录的提示
|
||
const totalInfo = await page.evaluate(() => {
|
||
const el = document.querySelector('[class*="pagination"]');
|
||
return el ? el.innerText : '(无)';
|
||
});
|
||
console.log('分页文本:', totalInfo);
|
||
|
||
await context.close();
|
||
process.exit(0);
|