CSS Selectors for Angular Testing

CSS Selectors are also part of the knowledge for testing in Angular.

Therefore we need to be clear what are the CSS Selectors are. Here is the official website MDN, let's start from the beginning.

What is a selector

It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the subject of the selector.

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

Here is the article about detailed information for Selectors.

Type, class, and ID selectors

This group includes selectors that target an HTML element such as an .

<custom-button>...</custom-button>

fixture.debugElement.query(By.css('custom-button')) // for Angular Testing

It also includes selectors which target a class:

<custom-button class="box">...</custom-button>

fixture.debugElement.query(By.css('.box')) // for Angular Testing

or, an ID:

<custom-button class="box" id="primary">...</custom-button>

fixture.debugElement.query(By.css('#primary')) // for Angular Testing

Attribute selectors

This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element.

And also the self defined attribute, and its value, e.g.

<custom-button  title="submit">...</custom-button>
<custom-button  title="close">...</custom-button>
<custom-button  title="next">...</custom-button>
<a href = "https://test.com">
<a href = "https://example.com">

Here if we want to select in the Angular Testing the custom-button with title='close', and select the a with test.com

fixture.debugElement.query(By.css('custom-button[title="close"]')) // for Angular Testing
fixture.debugElement.query(By.css('a[href="https://test.com"]')) // for Angular Testing

Pseudo-classes and pseudo-elements

It seems that in the testing, I have not met conditions that need to use Pseudo-classes and pseudo-elements. But still we could clarify them here.

Pseudo-classes,which style certain states of an element.

Pseudo-element,which select a certain part of an element rather than the element itself. For example, ::first-line always selects the first line of text inside an element

fixture.debugElement.query(By.css('a:hover')) // for Angular Testing
fixture.debugElement.query(By.css('p::first-line')) // for Angular Testing

Combinators

The final group of selectors combine other selectors in order to target elements within our documents. The following for example selects paragraphs that are direct children of

elements using the child combinator (>):

fixture.debugElement.query(By.css('article > p ')) // for Angular Testing

Multiple layers

        <button 
            id="close-button">
            <mat-icon>{{ MAT_ICON.close }}</mat-icon>
        </button>


    const queryElement = (cssQueryString: string): DebugElement => {
        return fixture.debugElement.query(By.css(cssQueryString));
    };

    const queryNativeElement = <T extends HTMLElement>(cssQueryString: string): T => {
        return queryElement(cssQueryString).nativeElement;
    };

 it('should contain the X icon', () => {
            expect(queryNativeElement('#close-button > span > mat-icon').innerHTML).toBe('close');
        });

notice above the #close-button > span > mat-icon, the span will be displayed inside the browser, but inside html there is not yet. So here should be more careful.

References Table of Selectors

cssSelectors

puddlejumper26 / blogs