wv3-selectors

wv3-selectors is a CommonJS Node package for building website CSS selectors.

It is useful for:

• Playwright scripts
• Puppeteer scripts
• scraping tools
• browser automation
• reusable selector maps
• test locators based on CSS

Install

npm install wv3-selectors

Usage

const s = require('wv3-selectors');

const selector = s.compound(
  s.tag('button'),
  s.class('primary'),
  s.data('testid', 'save-button')
);

console.log(selector);
// button.primary[data-testid="save-button"]

Main helpers

Basic pieces

const s = require('wv3-selectors');

s.tag('button');
// button

s.id('login-form');
// #login-form

s.class('card');
// .card

s.attr('href');
// [href]

s.attr('href', '/pricing');
// [href="/pricing"]

s.data('testid', 'hero-title');
// [data-testid="hero-title"]

Combine selector parts

const s = require('wv3-selectors');

const button = s.compound(
  s.tag('button'),
  s.class('btn'),
  s.class('btn-primary'),
  s.attr('type', 'submit')
);

console.log(button);
// button.btn.btn-primary[type="submit"]

Relationships

const s = require('wv3-selectors');

s.descendant('main', '.card', 'a[href]');
// main .card a[href]

s.child('ul.menu', 'li.item');
// ul.menu > li.item

s.sibling('.title', '.badge');
// .title ~ .badge

s.adjacent('label', 'input');
// label + input

s.list('#hero', '.banner', 'main > section');
// #hero, .banner, main > section

Pseudo selectors

const s = require('wv3-selectors');

s.compound('li', s.nth(3));
// li:nth-child(3)

s.compound('article', s.not('.hidden'));
// article:not(.hidden)

s.compound('section', s.has('img'));
// section:has(img)

Chain builder

const s = require('wv3-selectors');

const selector = s
  .create()
  .tag('button')
  .class('primary')
  .data('testid', 'checkout')
  .attr('type', 'submit')
  .toString();

console.log(selector);
// button.primary[data-testid="checkout"][type="submit"]

Playwright example

const { chromium } = require('playwright');
const s = require('wv3-selectors');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const saveButton = s
    .create()
    .tag('button')
    .data('testid', 'save-button')
    .toString();

  await page.click(saveButton);
  await browser.close();
})();

API

• tag(name)
• id(name)
• class(name)
• cls(name)
• attr(name, value?, operator?)
• data(name, value, operator?)
• pseudo(name, value?)
• nth(index)
• nthOfType(index)
• not(selector)
• has(selector)
• where(selector)
• is(selector)
• compound(...parts)
• descendant(...selectors)
• child(parent, child)
• sibling(left, right)
• adjacent(left, right)
• list(...selectors)
• create(initialSelector?)
• escapeIdent(value)
• escapeAttrValue(value)

Test

npm test

License

MIT