kibana/packages/kbn-test-subj-selector
Dzmitry Lemechko 7bbdab0653
[codeowners] add appex-qa for ftr-related packages (#155230)
## Summary

While elastic/appex-qa is in process to take ownership over FTR related
code, from elastic/kibana-operations it will be good to keep track on
any changes happening and participate in the review process.
2023-05-24 08:53:09 +02:00
..
index.ts modernize test-subj-selector (#140847) 2022-09-15 22:08:51 -07:00
jest.config.js modernize test-subj-selector (#140847) 2022-09-15 22:08:51 -07:00
kibana.jsonc [codeowners] add appex-qa for ftr-related packages (#155230) 2023-05-24 08:53:09 +02:00
package.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00
README.mdx modernize test-subj-selector (#140847) 2022-09-15 22:08:51 -07:00
test_subj_selector.test.ts modernize test-subj-selector (#140847) 2022-09-15 22:08:51 -07:00
test_subj_selector.ts modernize test-subj-selector (#140847) 2022-09-15 22:08:51 -07:00
tsconfig.json Transpile packages on demand, validate all TS projects (#146212) 2022-12-22 19:00:29 -06:00

---
id: kibDevDocsOpsTestSubjSelector
slug: /kibana-dev-docs/ops/test-subj-selector
title: "@kbn/test-subj-selector"
description: An utility package to quickly get css selectors from strings
date: 2022-05-19
tags: ['kibana', 'dev', 'contributor', 'operations', 'test', 'subj', 'selector']
---

Converts a testSubject selector into a CSS selector.

testSubject selector syntax rules:

  - `data-test-subj` values can include spaces

  - prefixing a value with `~` will allow matching a single word in a `data-test-subj` that uses several space delimited list words
    - example: `~foo`
    - css equivalent: `[data-test-subj~="foo"]`

  - the `>` character is used between two values to indicate that the value on the right must match an element inside an element matched by the value on the left
    - example: `foo > bar`
    - css equivalent: `[data-test-subj=foo] [data-test-subj=bar]`

  - the `&` character is used between two values to indicate that the value on both sides must both match the element
    - example: `foo & bar`
    - css equivalent: `[data-test-subj=foo][data-test-subj=bar]`