# 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)