Skip to main content

Function: and()

and(base, ...locators): PartLocator

Defined in: packages/core/src/utils/locatorUtil.ts:72

Compose additional matchers onto the SAME element, producing one compound CSS selector — e.g. [role="button"] and [aria-label="Open"] together become [role="button"][aria-label="Open"].

This is the ergonomic, footgun-free form of same-element composition: it supersedes append(byRole('button'), byAriaLabel('Open', 'Same')) — there is no 'Same' argument to remember (the relationship no longer has to be stored on the appended child) and no wrapper call. The result keeps base's position relative to its parent; the appended matchers contribute only their attribute/selector fragment.

Same-element, pure-CSS only:

  • Put a tag-name matcher (byTagName) FIRST — a CSS type selector is only valid at the start of a compound (input[type="text"], never [type="text"]input).
  • Computed accessible names (aria-labelledby / <label> / text) are not CSS-expressible and stay out of scope (see #923); compose a verbatim aria-label via byAriaLabel instead.
  • Linked locators (byLinkedElement) resolve at runtime and cannot be folded into a static compound; passing one as base or as a matcher throws.
  • base and every matcher must each be a one-element, primitive chain — what a fresh by* call produces, and also what and() itself returns, so its result can be composed again. A multi-element chain (append()'s typical output) has no single element left to compound onto and is rejected.

Parameters​

base​

PartLocator

The locator to compound additional matchers onto.

locators​

...PartLocator[]

Additional same-element matchers to compound onto base.

Returns​

PartLocator

Example​

const openButton = locatorUtil.and(byRole('button'), byAriaLabel('Open'));
const activeTab = locatorUtil.and(byRole('tab'), byAttribute('aria-selected', 'true'));