SuperAPI AI Directory

selector-generator

Data & analytics

View repository

Updated 10-27 05:21

About this skill

Selector Generator — CSS/XPath Selector Generation + Validation

A skill that enhances parser-engineer's selector authoring capabilities.

Target Agents

  • parser-engineer — Designs accurate selectors during HTML parsing
  • monitor-operator — Implements selector change detection logic

Selector Strategy Priority

1st: Unique ID           -> #product-price
2nd: data-* attributes   -> [data-testid="price"]
3rd: Semantic classes     -> .product-price
4th: ARIA attributes      -> [aria-label="price"]
5th: Structural selectors -> article > .info > span
6th: Text XPath          -> //span[contains(text(),"$")]

Patterns to Avoid

Pattern Problem Alternative
.css-1a2b3c CSS-in-JS hash changes Parent semantic element
div>div>div>span Breaks on structure changes Meaningful class
:nth-child(7) alone Breaks when elements change Class + nth combination

Selector Pattern Recipes

Product Listings

selectors = {
    "container": "ul.product-list > li",
    "name": ".product-name, h3.title",
    "price": {
        "current": ".sale-price, [data-price]",
        "original": ".original-price, del"
    },
    "image": "img.product-image::attr(src)",
    "link": "a.product-link::attr(href)",
    "pagination": {
        "next": "a.next, [rel='next']",
        "total": ".total-pages"
    }
}

Forums/News

selectors = {
    "article_list": "article, .post-item",
    "title": "h2 > a, .article-title",
    "author": ".author, .writer",
    "date": "time::attr(datetime), .date",
    "content": "article .content, .post-body"
}

Tables

def table_to_dicts(html):
    headers = [th.text for th in select("thead th")]
    return [
        {h: cell.text for h, cell in zip(headers, row.select("td"))}
        for row in select("tbody tr")
    ]

XPath vs CSS Decision Criteria

Situation Recommendation Example
ID/class-based CSS #price
Text contains search XPath //span[contains(text(),"$")]
Parent traversal XPath //span[@class="price"]/parent::div
Sibling relationship XPath //dt[text()="Price"]/following-sibling::dd
Conditional XPath //div[@class="item" and .//span[@class="sale"]]

Selector Robustness Score (0-100)

+30: ID-based
+25: data-testid
+20: Semantic class
+15: ARIA attribute
-10: nth-child alone
-20: Hash class
-30: 5+ level nesting

80-100: Stable | 60-79: Moderate | 40-59: Fragile | 0-39: Risky

Change Detection Pattern

selector_health = {
    "selector": ".product-price",
    "expected_pattern": r"[\d,.]+",
    "expected_count_min": 1,
    "fallback_selectors": ["[data-price]", "span.price"],
    "status": "active"  # active | degraded | broken
}

Data Cleansing Pipeline

def clean_price(raw: str) -> int:
    return int(re.sub(r'[^\d]', '', raw))

def clean_date(raw: str) -> str:
    # Various formats -> ISO 8601 conversion

def clean_url(raw: str, base: str) -> str:
    return urljoin(base, raw)