所见破败刮取器，形制皆同：必有人撰其刮取之理也。初且选者其次选器乃临时之想——唯DevTools午夜二时之效可用耳。
此乃倒置。选择器乃代码与页面之约。误之，则余者皆无谓矣。
心态之变
选用先之思者，谓于书一行提取之码未成，先决 数据之识如何 。非问“如何得价？”乃问“页所示，以程序之理，此物为价者何？”
三答，序先而择：
-
义理 —
getByRolegetByLabel、getByText，此二者映现无障碍树所显。虽经设计之变，犹存焉。 -
数据属性—
data-testid、data-product-id、itemprop。开发者常为自测而增之；尔得乘便而行。 - 结构化数据 — JSON-LD、微数据、OpenGraph。此页已向Google说明何为价格；亦使其告知尔。
CSS类乃万不得已之策。类名非身份之所在，随设计而变。犹求“自上而下第三按纽”——可行，直至菜单更易。
三项清单
撰择器之前：
-
于开发工具（Chrome：元素→可访问性标签页）中开启可访问性树。若数据具角色且可访问名，则用
getByRole。 -
于页面源码中搜
application/ld+json。若其存且含尔之字段，则直解之，无需遍历DOM。 -
于数据近处寻
data-*属性。 开发者遍置测试钩子。用其法。
若此皆无效， 则 退而求诸 CSS 或 XPath。且行此，必锚于稳固之物——父标识、aria-label、data- 属性——非徒依类链。
十行代换
新角色之优先序，吾所行者如是：
async function extractPrice(page) {
// 1. Structured data first.
const ld = await page.locator('script[type="application/ld+json"]')
.first().textContent();
const data = JSON.parse(ld ?? '{}');
if (data?.offers?.price) return data.offers.price;
// 2. Semantic selectors.
const priceByLabel = page.getByLabel(/^price$/i);
if (await priceByLabel.count()) return priceByLabel.textContent();
// 3. Data attributes.
const priceByData = page.locator('[data-testid="price"]');
if (await priceByData.count()) return priceByData.textContent();
// 4. Last resort: CSS class. Logged loudly so we know we're in fallback.
console.warn('Falling back to CSS selector — selector audit needed.');
return page.locator('.price-tag').textContent();
}
察告警于备选之途。当此警始现于尔之日志，乃知此域更其高要之讯，尔距败坏仅一设计更新之遥。当其未败而治之，勿待其败而后谋。
简例
于吾之理想家扮演者，上序之优先次第，将"每六周修正选择器"之常例，易为"每年修正选择器两次"之常例。JSON-LD路径不触DOM，即可捕获95%之房源。可访问性角色之备选方案，又捕获4%。CSS备选方案触发于边缘案例之属性类型，并示吾新布局已发布——通常在我等他种监测察觉前一周。
未请之CTA
此选择器之梯，乃吾辈所送每物之次第，继上周文中所阻之请 — 观其行于 Idealista之俦。其致如此，遂为吾辈制一利器.
故曰：
速启汝之刮取器之选择器之码。 计其类名链之数，较之语义/结构数据之检索。注其比率于文末。最长CSS链者得赏——吾断其必有人有 .product-grid > .item:nth-child(3) > .price > span > strong.
然否？或有机遇需CSS链者？请复。
乃**Nova Chen所撰，SIÁN Agency自动化开发之倡者。欲知Nova更多，访 dev.to。者，若欲定制爬取或自动化之事，宜聘SIÁN Agency。