https://github.com/lsphillips/wait-for-the-element
A utility library that enables you to efficiently wait for an element to appear or disappear.
https://github.com/lsphillips/wait-for-the-element
library
Last synced: about 1 year ago
JSON representation
A utility library that enables you to efficiently wait for an element to appear or disappear.
- Host: GitHub
- URL: https://github.com/lsphillips/wait-for-the-element
- Owner: lsphillips
- License: mit
- Created: 2018-09-24T23:03:13.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2025-04-11T17:52:13.000Z (about 1 year ago)
- Last Synced: 2025-04-13T16:09:50.783Z (about 1 year ago)
- Topics: library
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/wait-for-the-element
- Size: 1.54 MB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# `wait-for-the-element`
[](https://www.npmjs.com/package/wait-for-the-element)
[](https://github.com/lsphillips/wait-for-the-element/actions)
A utility library that enables you to efficiently wait for an element to appear or disappear.
## Usage
This module can be treated as an ES module:
``` js
import { waitForTheElement, waitForTheElementToDisappear } from 'wait-for-the-element';
```
This module can also be treated as a CommonJS module:
``` js
const { waitForTheElement, waitForTheElementToDisappear } = require('wait-for-the-element');
```
### Waiting for an element
You can wait for an element to match a provided selector and retrieve it:
``` js
const element = await waitForTheElement('.target', {
timeout : 5000
});
if (element === null)
{
// After 5 seconds, a matching element still doesn't exist.
}
```
**Important Note:** If the selector matches multiple elements, only the first match will be returned.
### Waiting for an element to disappear
You can wait for all elements to stop matching a provided selector:
``` js
const hidden = await waitForTheElementToDisappear('.target', {
timeout : 5000
});
if (!hidden)
{
// After 5 seconds, a matching element still exists.
}
```
### Selectors
All functions accept CSS selectors supported by `document.querySelector()`.
### Options
All functions accept an optional settings object that control how elements are searched for:
| Options | Required | Default | Description |
| --------- | :------: | :--------: | ----------------------------------------------------- |
| `timeout` | No | `2500` | The maximum amount of time (in milliseconds) to wait. |
| `scope` | No | `document` | The root element to start searching from. |
## Getting started
This module is available through the Node Package Manager (NPM):
```
npm install wait-for-the-element
```
## Development
### Building
You can build UMD and ESM versions of this module that are both ES5 compatible and minified:
``` sh
npm run build
```
### Testing
This module also has a robust test suite:
``` sh
npm test
```
This includes a code quality check using ESLint. Please refer to the `eslint.config.js` files to familiar yourself with the rules.
## License
This project is released under the [MIT license](LICENSE.txt).