Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/joomcode/create-locator
Creates typed component locators for tests 📌
https://github.com/joomcode/create-locator
autotest component e2e locator selector
Last synced: about 2 months ago
JSON representation
Creates typed component locators for tests 📌
- Host: GitHub
- URL: https://github.com/joomcode/create-locator
- Owner: joomcode
- License: mit
- Created: 2023-03-09T09:15:06.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-21T15:30:51.000Z (8 months ago)
- Last Synced: 2024-05-21T16:46:16.895Z (8 months ago)
- Topics: autotest, component, e2e, locator, selector
- Language: TypeScript
- Homepage:
- Size: 467 KB
- Stars: 0
- Watchers: 5
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# create-locator 📌
[![NPM version][npm-image]][npm-url]
[![dependencies: none][dependencies-none-image]][dependencies-none-url]
[![minzipped size][size-image]][size-url]
[![code style: prettier][prettier-image]][prettier-url]
[![Conventional Commits][conventional-commits-image]][conventional-commits-url]
[![License MIT][license-image]][license-url]
The `create-locator` 📌 library allows you to mark HTML elements with locators and
find these elements by their locators in tests.
Marking an HTML element with a locator in the application code looks like this (example in JSX):
```tsx
export const Foo = () => {
return
Hello👋 world!;
};
```
In the browser, this element will render into the following DOM structure:
```tsx
Hello👋 world!
```
In tests you can use locators in this way (example in [Playwright](https://playwright.dev/)):
```tsx
await locator('foo').click();
```
## Install
```sh
npm install create-locator
```
## Usage
The first argument of the locator function is called the locator's `testId`.
Typically, it’s a unique string that allows you to find the element marked by the locator in tests.
The locator can also have an optional set of arbitrary parameters (only the line with the locator is shown):
```tsx
```
This element with the locator will render into the following DOM structure:
```tsx
```
The values of the parameters can also be numbers and boolean values:
```tsx
```
This will render as:
```tsx
```
Parameters with `null` and `undefined` values will be omitted:
```tsx
```
This will render as:
```tsx
```
The `testId` of the locator can consist of multiple parts, including numbers and boolean values:
```tsx
```
This will render as:
```tsx
```
An object with parameters can also follow several parts of the `testId`:
```tsx
```
This will render as:
```tsx
```
The ability to specify a `testId` composed of multiple parts is useful for dynamic components,
which can accept an optional `testId` string property in their props:
```tsx
type Properties = {..., testId?: string};
export const Button = ({..., testId}: Properties) => (
{/* ... */}
)
```
For example, with `testId="submitButton"`, this will render into the following DOM structure:
```tsx
{/* ... */}
```
## License
[MIT][license-url]
[conventional-commits-image]: https://img.shields.io/badge/Conventional_Commits-1.0.0-yellow.svg 'The Conventional Commits specification'
[conventional-commits-url]: https://www.conventionalcommits.org/en/v1.0.0/
[dependencies-none-image]: https://img.shields.io/badge/dependencies-none-success.svg 'No dependencies'
[dependencies-none-url]: https://github.com/joomcode/create-locator/blob/main/package.json
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg 'The MIT License'
[license-url]: LICENSE
[npm-image]: https://img.shields.io/npm/v/create-locator.svg 'create-locator'
[npm-url]: https://www.npmjs.com/package/create-locator
[prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg 'Prettier code formatter'
[prettier-url]: https://prettier.io/
[size-image]: https://img.shields.io/bundlephobia/minzip/create-locator 'create-locator'
[size-url]: https://bundlephobia.com/package/create-locator