# @devoxa/cypress-page-performance

> Save page performance metrics to disk during Cypress runs

Latest version **2.0.2** (published 2023-01-28) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install @devoxa/cypress-page-performance
pnpm add @devoxa/cypress-page-performance
yarn add @devoxa/cypress-page-performance
bun add @devoxa/cypress-page-performance
```

Provides the command `format-page-performance-metrics-as-gfm`.

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.0.2 |
| Published | 2023-01-28 |
| First published | 2021-06-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 54.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | queicherius |

## Links

- npm: https://www.npmjs.com/package/@devoxa/cypress-page-performance
- Repository: https://github.com/devoxa/cypress-page-performance
- npm.io page: https://npm.io/package/@devoxa/cypress-page-performance

## Dependencies (2)

- [yargs](https://npm.io/package/yargs.md) 17.6.2
- [@devoxa/flocky](https://npm.io/package/@devoxa/flocky.md) 1.4.0

## Recent versions

- 2.0.2 (latest) — 2023-01-28
- 2.0.1 — 2021-09-12
- 2.0.0 — 2021-09-12
- 1.1.1 — 2021-07-06
- 1.1.0 — 2021-06-30
- 1.0.0 — 2021-06-27

## README

# :no_entry: DEPRECATED :no_entry:

### This package has been archived and is no longer maintained. While we will not provide any updates or support, the code is still available for reference. If you need this package for your project, we encourage you to fork & republish the code following the license terms.

---

<!-- Title -->
<h1 align="center">
  cypress-page-performance
</h1>

<!-- Description -->
<h4 align="center">
  Save page performance metrics to disk during Cypress runs.
</h4>

<!-- Badges -->
<p align="center">
  <a href="https://www.npmjs.com/package/@devoxa/cypress-page-performance">
    <img
      src="https://img.shields.io/npm/v/@devoxa/cypress-page-performance?style=flat-square"
      alt="Package Version"
    />
  </a>

  <a href="https://github.com/devoxa/cypress-page-performance/actions?query=branch%3Amaster+workflow%3A%22Continuous+Integration%22">
    <img
      src="https://img.shields.io/github/actions/workflow/status/devoxa/cypress-page-performance/push.yml?branch=master&style=flat-square"
      alt="Build Status"
    />
  </a>
</p>

<!-- Quicklinks -->
<p align="center">
  <a href="#installation">Installation</a> •
  <a href="#usage">Usage</a> •
  <a href="#additional-helpers">Additional helpers</a> •
  <a href="#contributors">Contributors</a> •
  <a href="#license">License</a>
</p>

<br>

## Installation

1. Install the package

```bash
yarn add --dev @devoxa/cypress-page-performance
```

2. Import the command in `cypress/support/commands.ts`:

```ts
import { addSavePagePerformanceMetricsCommand } from '@devoxa/cypress-page-performance/command'
addSavePagePerformanceMetricsCommand()
```

3. Import the plugin in `cypress/plugins/index.ts`:

```ts
import { addSavePagePerformanceMetricsPlugin } from '@devoxa/cypress-page-performance/plugin'

export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
  addSavePagePerformanceMetricsPlugin(on, config)

  // You can also optionally add an additional options object:
  // addSavePagePerformanceMetricsPlugin(on, config, options)

  return config
}
```

Additional available options:

- `fileName`: The name of the file that the page performance metrics are saved into, defaults to
  `page-performance-metrics.json`

## Usage

```ts
describe('SignInPage', () => {
  it('renders the page successfully', () => {
    cy.visit('/sign-in')

    cy.savePagePerformanceMetrics('SignInPage')
  })
})
```

After running Cypress, the plugin will output a JSON file with an array of page performance entries
in the root directory.

```json
[
  {
    "label": "SignInPage",
    "encodedBodySize": 205048,
    "resourceLoadFinish": 156.32,
    "nextjsHydrationFinish": 137.64
  }
]
```

## Additional helpers

The package also includes an additional helper that formats the output JSON as a markdown table
using Github flavoured markdown, encoded for use in Github actions.

```sh
./node_modules/.bin/format-page-performance-metrics-as-gfm
```

## Contributors

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://www.david-reess.de"><img src="https://avatars3.githubusercontent.com/u/4615516?v=4" width="75px;" alt=""/><br /><sub><b>David Reeß</b></sub></a><br /><a href="https://github.com/devoxa/cypress-page-performance/commits?author=queicherius" title="Code">💻</a> <a href="https://github.com/devoxa/cypress-page-performance/commits?author=queicherius" title="Documentation">📖</a> <a href="https://github.com/devoxa/cypress-page-performance/commits?author=queicherius" title="Tests">⚠️</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors)
specification. Contributions of any kind welcome!

## License

MIT

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