Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dylanblokhuis/gatsby-plugin-playwright
https://www.npmjs.com/package/gatsby-plugin-playwright
https://github.com/dylanblokhuis/gatsby-plugin-playwright
gatsby playwright plugin
Last synced: 25 days ago
JSON representation
https://www.npmjs.com/package/gatsby-plugin-playwright
- Host: GitHub
- URL: https://github.com/dylanblokhuis/gatsby-plugin-playwright
- Owner: dylanblokhuis
- Created: 2020-05-09T19:09:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-06-06T04:03:42.000Z (over 3 years ago)
- Last Synced: 2024-09-29T08:03:10.279Z (about 1 month ago)
- Topics: gatsby, playwright, plugin
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-plugin-playwright
Uses [Playwright](https://github.com/microsoft/playwright) to generate screenshots in Chromium, Firefox and WebKit.
_NOTE: This plugin only generates output with `gatsby build`_
## Install
`yarn add -D gatsby-plugin-playwright`
## Usage
```javascript
plugins: ['gatsby-plugin-playwright']
```
## Options
The options are as follows:
- `port` (number) The port number for the web server to listen to. Defaults to `9000`.
- `screenshotsDir` (string) The screenshots directory path. Defaults to `./screenshots`.
- `browsers` (array of strings) An array of browsers for playwright to screenshot. Defaults to `['chromium', 'firefox', 'webkit']`
- `context` ([BrowserContext](https://github.com/microsoft/playwright/blob/master/docs/api.md#class-browsercontext)) Defaults to `{}`
- `query` (GraphQL Query) The query for the data you need to generate the screenshots. If you change the query you also need to change the serialize function to properly format the data.
- `serialize` (function) Takes the output of the data query and has to return an array with strings that reflects the page path.
## Example with options:
```javascript
// gatsby-config.js for desktop testing
plugins: [
{
resolve: 'gatsby-plugin-playwright',
options: {
port: 9000,
screenshotsDir: './screenshots',
browsers: ['chromium', 'firefox', 'webkit'],
context: {},
query: `
{
allSitePage {
nodes {
path
}
}
}
`,
serialize: function ({ allSitePage }) {
return allSitePage.nodes.map((page) => page.path);
}
}
},
]
```
Define a context to test for different widths, heights, geolocation and permissions. You can read more about the browser context on the official [Playwright documentation](https://github.com/microsoft/playwright/blob/master/docs/api.md#class-browsercontext)
```javascript
// gatsby-config.js for testing specific contexts
plugins: [
{
resolve: `gatsby-plugin-playwright`,
options: {
browsers: ['webkit'],
// This example is an iPhone 11
context: {
'userAgent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0 Mobile/15E148 Safari/604.1',
'viewport': {
'width': 414,
'height': 896
},
'deviceScaleFactor': 2,
'isMobile': true,
'hasTouch': true
},
}
},
]
```