1.0.8 • Published 5 years ago
scope-selectors v1.0.8
Auto Scope Selectors
Simple library to simplify making a declaritive set of query selectors to match a page structure. Useful for making a concise reusable set of selectors which can be used with libraries such as puppeteer.
import {makeScopeSelectors, a, t} from './scope-selectors'
// Create a proxy that will auto scope by hierarchy
const selectors = makeScopeSelectors({
"home_page": {
"title": ".title",
"go_button": ".go-buton",
"feed_section": {
"__scope": ".feeds", // This query scope will be prepended to all other selectors at this level or descendants
"item_name": ".item",
"type": a`red` // This is a template for selecting anchors by text using XPath. Note XPath is literal and does not combine with CSS scoped selectors
}
},
"about_page": {
"contact": ".contact"
}
})
// Example, get query selectors for items in the feed section of our page
let scope = selectors.home_page.feed_section
console.log(scope.item_name === '.feeds .item') // CSS selectors are scoped by hierarchy prepending any defined __scope values in our JSON object
console.log(scope.type === `//a[text()='red']` ) // XPath selectors are literal as they can't be combined with CSS selectors