# cypress-xpath

> Adds XPath command to Cypress test runner

Latest version **2.0.1** (published 2022-07-22) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install cypress-xpath
pnpm add cypress-xpath
yarn add cypress-xpath
bun add cypress-xpath
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2022-07-22 |
| First published | 2018-12-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 146 |
| Author | Gleb Bahmutov |
| Maintainers | cypress-npm-publisher |
| Keywords | cypress, cypress-io, xpath |

## Links

- npm: https://www.npmjs.com/package/cypress-xpath
- Repository: https://github.com/cypress-io/cypress-xpath
- Homepage: https://github.com/cypress-io/cypress-xpath#readme
- Issues: https://github.com/cypress-io/cypress-xpath/issues
- npm.io page: https://npm.io/package/cypress-xpath

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 2.0.1 (latest) — 2022-07-22
- 2.0.0 — 2022-06-22
- 1.8.0 — 2022-06-22
- 1.7.0 — 2022-06-22
- 1.6.2 — 2021-02-10
- 1.6.1 — 2020-11-04
- 1.6.0 — 2020-05-26
- 1.5.0 — 2020-05-26
- 1.4.1 — 2020-05-26
- 1.4.0 — 2019-05-02
- 1.3.1 — 2019-04-26
- 1.3.0 — 2018-12-18
- 1.2.0 — 2018-12-07
- 1.1.0 — 2018-12-06
- 1.0.0 — 2018-12-06

## README

# cypress-xpath

[![CircleCI](https://circleci.com/gh/cypress-io/cypress-xpath.svg?style=svg&circle-token=c1c1eb7da56fcc8a49b96e7155161728987f9878)](https://circleci.com/gh/cypress-io/cypress-xpath) [![renovate-app badge][renovate-badge]][renovate-app] ![cypress version](https://img.shields.io/badge/cypress-10.2.0-brightgreen)

> Adds XPath command to [Cypress.io](https://www.cypress.io) test runner

## Install with npm

```shell
npm install -D cypress-xpath
```

## Install with Yarn

```shell
yarn add cypress-xpath --dev
```

Then include in your project's [support file](https://on.cypress.io/support-file)

```js
require('cypress-xpath');
```

## Use

After installation your `cy` object will have `xpath` command.

```js
it('finds list items', () => {
  cy.xpath('//ul[@class="todo-list"]//li').should('have.length', 3);
});
```

You can also chain `xpath` off of another command.

```js
it('finds list items', () => {
  cy.xpath('//ul[@class="todo-list"]').xpath('./li').should('have.length', 3);
});
```

As with other cy commands, it is scoped by `cy.within()`.

```js
it('finds list items', () => {
  cy.xpath('//ul[@class="todo-list"]').within(() => {
    cy.xpath('./li').should('have.length', 3);
  });
});
```

**note:** you can test XPath expressions from DevTools console using `$x(...)` function, for example `$x('//div')` to find all divs.

See [cypress/e2e/spec.cy.js](cypress/e2e/spec.cy.js)

## Beware the XPath // trap

In XPath the expression // means something very specific, and it might not be what you think. Contrary to common belief, // means "anywhere in the document" not "anywhere in the current context". As an example:

```js
cy.xpath('//body').xpath('//script');
```

You might expect this to find all script tags in the body, but actually, it finds all script tags in the entire document, not only those in the body! What you're looking for is the .// expression which means "any descendant of the current node":

```js
cy.xpath('//body').xpath('.//script');
```

The same thing goes for within:

```js
cy.xpath('//body').within(() => {
  cy.xpath('.//script');
});
```

This explanation was shamelessly copied from [teamcapybara/capybara][capybara-xpath-trap].

## TypeScript and IntelliSense support

To properly load the types for `cy.xpath` command, add to your spec file the following comment.

```js
/// <reference types="cypress-xpath" />
```

![cypress-xpath intellisense](./images/cypress-xpath-reference.gif)

If using TypeScript, add `cypress-xpath` to the list of types to be loaded in `tsconfig.json`

```json
{
  "compilerOptions": {
    "types": ["cypress", "cypress-xpath"]
  }
}
```

For more, see [Intelligent Code Completion](https://on.cypress.io/intellisense)

## Roadmap

- [x] wrap returned DOM nodes in jQuery [#2](https://github.com/cypress-io/cypress-xpath/issues/2)
- [x] retry the assertion that follows [#3](https://github.com/cypress-io/cypress-xpath/issues/3)
- [x] add TypeScript definitions [#4](https://github.com/cypress-io/cypress-xpath/issues/4)
- [ ] search from the previous subject element [#5](https://github.com/cypress-io/cypress-xpath/issues/5)
- [x] log or not, depending on user option [#19](https://github.com/cypress-io/cypress-xpath/issues/19)

## License

This project is licensed under the terms of the [MIT license](/LICENSE.md).

## Update badge

To update the Cypress version badge in this README file run

```
$ npm run badges
```

## Additional info

- [Writing a Custom Cypress Command](https://glebbahmutov.com/blog/writing-custom-cypress-command/)
- [How to Publish Custom Cypress Command on NPM](https://glebbahmutov.com/blog/publishing-cypress-command/)

[renovate-badge]: https://img.shields.io/badge/renovate-app-blue.svg
[renovate-app]: https://renovateapp.com/
[capybara-xpath-trap]: https://github.com/teamcapybara/capybara/tree/3.18.0#beware-the-xpath--trap

---
_Source: https://npm.io/package/cypress-xpath · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._