# Embrace the Power of CSS

When working with targets or methods such as `*. assertNodeCount` besides generic CSS selectors we can use [Pseudo classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) and [Attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors). Let’s take a look at some real-world example to discover what advantages it can bring us 

### Forms 

Imagine we have a form

```markup
<form>
  <input
      type="email"
      required
      name="email"
      placeholder="Enter email" />
      
  <input
      type="text"
      required
      name="zip"
      pattern="^\d{5}$"
      placeholder="Enter ZIP code" />    
      
   <button type="submit">Submit</button>   
</form>
```

With the test case we seed the form with  data and submit the form. Then we want to assert that there are no inputs in invalid state ([see also HTML5 Constraint Validation API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation)) So we use `FORM.assertNodeCount` method to look for `input:invalid`&#x20;

![Asserting form validity](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtdqyJxweQ9f0W8Toci%2F-LtisY-620IDcRxAASrd%2Fprotips1.png?alt=media\&token=435f74d4-4459-4dac-8f6f-7707b3d8f918)

If any of test values do not pass the validation (empty value, invalid email address, invalid ZIP) the assertion will fail.&#x20;

What is more, we can assert that a checkbox control is checked with `target.assertMatchesSelector` method:

![Asserting checkbox is checked](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtdqyJxweQ9f0W8Toci%2F-LtisvbqOCNKwVHigK2M%2Fprotips2.png?alt=media\&token=55042abc-b13c-4bb9-aec2-ba3609482aa0)

### Lists&#x20;

Imagine we have a blog app. We are testing article details page and want to ensure the social sharing links are not broken. Let’s say a simplified layout for the block is following:&#x20;

```markup
<ul id="social">
  <li><a href="https://www.facebook.com/...">Share via Facebook</a></li>
  <li><a href="https://twitter.com/...">Share via Twitter</a></li>  
</ul>
```

So we create targets `SHARE_FACEBOOK` and `SHARE_TWITTER`&#x20;

![Taking advantage of attribute selectors](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtdqyJxweQ9f0W8Toci%2F-LtitVdm-tMkUtT789lt%2Fprotips3.png?alt=media\&token=f261d5a3-2ffe-4ca3-bfc1-64539d65a46c)

The trick here is that `href` attribute of share links in reality  is a long string and also dynamic (depends on the page), but we go with **attribute selector** and target any links whose `href` contains a keyword (e.g. facebook.com). Thus we distinguish facebook and twitter links. Now we can assert availability and visibility:

![Asserting availability and visibility ](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtdqyJxweQ9f0W8Toci%2F-Ltiu3lZ6_1tOLYH4oyU%2Fprotips4.png?alt=media\&token=ad44f060-f3cc-4ee9-b0b3-1c1c0592e183)

We can assert that the links are provided with text description:&#x20;

![Asserting that element is not empty](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtdqyJxweQ9f0W8Toci%2F-LtiuE7Z-MjDm1ZUSyPO%2Fprotips5.png?alt=media\&token=68af7133-c9fc-452f-b046-c47ec13d8bb4)

The selector `:not(:empty)` will be matched only if the link has text or child nodes.

### In-page Navigation&#x20;

Imagine we have a page with internal links. When user follows such a link the page changes its hash and scrolls to the anchored content or changes UI state. In our case we have a tabbed UI component, which opens the tab with desired content when page hash is `#chapter1`. If we want to assert the internal link is followed we use `page.assertNodeCount`

![Using :target pseudo-class](https://3461068122-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LdyKJ-zzeS2hB7DF04J%2F-LtdqyJxweQ9f0W8Toci%2F-LtiuhQFZrkNwVWG35Ej%2Fprotips6.png?alt=media\&token=a002eab4-f817-4c1b-8e17-42c7772ec947)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.puppetry.app/tips-and-tricks/embrace-the-power-of-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.