Skip to main content

Page Object methods list

This is a quick reference for all methods provided by the PageObjectModel class. Refer to this page when looking for information about specific methods.

Methods returning DebugHtmlElement​

The DebugHtmlElement<HTMLElementType> type is just an extension of the native Angular's DebugElement which provides better typing by allowing the optional <HTMLElementType> that defaults to <HTMLElement>.

All methods of this group take as input the <HTMLElementType> and will return either one or an array of DebugHtmlElement<HTMLElementType>:

getDebugElementByCss​

  • Given a CSS selector, returns a DebugHtmlElement.
  • Takes an optional assert parameter which defaults to true.
getDebugElementByCss<HTMLElementType extends HTMLElement = HTMLElement>(
  cssSelector: string,
  assert = true,
): DebugHtmlElement<HTMLElementType>;

getDebugElementByTestId​

  • Given a data-testid, returns a DebugHtmlElement.
  • Takes an optional assert parameter which defaults to true.
getDebugElementByTestId<HTMLElementType extends HTMLElement = HTMLElement>(
  testId: string,
  assert = true,
): DebugHtmlElement<HTMLElementType>;

getDebugElementByDirective​

  • Given directive (e.g. a ComponentType), returns a DebugHtmlElement items.
  • Takes an optional assert parameter which defaults to true.
getDebugElementByDirective<HTMLElementType extends HTMLElement = HTMLElement>(
  directive: Type<unknown>,
  assert = true,
): DebugHtmlElement<HTMLElementType>;

getAllDebugElementsByCss​

  • Given a CSS selector, returns an array of all matching DebugHtmlElement items.
getAllDebugElementsByCss<HTMLElementType extends HTMLElement = HTMLElement>(
  cssSelector: string,
): DebugHtmlElement<HTMLElementType>[];

getAllDebugElementsByTestId​

  • Given a data-testid, returns an array of all matching DebugHtmlElement items.
getAllDebugElementsByTestId<HTMLElementType extends HTMLElement = HTMLElement>(
  testId: string,
): DebugHtmlElement<HTMLElementType>[];

getAllDebugElementsByDirective​

  • Given directive (e.g. a ComponentType), returns an array of all matching DebugHtmlElement items.
getAllDebugElementsByDirective<HTMLElementType extends HTMLElement = HTMLElement>(
  directive: Type<unknown>,
): DebugHtmlElement<HTMLElementType>[];

Methods returning a native HTML element​

These methods return directly the specified HTML element type (which defaults to HTMLElement when not provided).

The returned element is equivalent of the debugElement.nativeElement object returned by the methods of the previous group and its usage is more limited.

query​

  • Given a CSS selector, returns a native HTML element.
  • Takes an optional assert parameter which defaults to true.
query<T extends HTMLElement>(cssSelector: string, assert = true): T;

queryAll​

  • Given a CSS selector, returns an array containing all the matching native HTML elements.
queryAll<T extends HTMLElement>(selector: string): T[];

Other methods​

detectChanges​

  • Calls fixture.detectChanges()
detectChanges(): void;

removeNativeElement​

  • Removes the HTML element of the component from the DOM.
removeNativeElement(): void;