https://github.com/kantord/cy-tkey-screenshot
Automatically generate screenshots for your translation keys using Cypress
https://github.com/kantord/cy-tkey-screenshot
automation cypress cypress-plugin internationalization localization screenshot tooling translation
Last synced: about 2 months ago
JSON representation
Automatically generate screenshots for your translation keys using Cypress
- Host: GitHub
- URL: https://github.com/kantord/cy-tkey-screenshot
- Owner: kantord
- Created: 2020-11-01T12:06:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-12-15T17:39:22.000Z (over 1 year ago)
- Last Synced: 2025-01-10T14:53:39.276Z (4 months ago)
- Topics: automation, cypress, cypress-plugin, internationalization, localization, screenshot, tooling, translation
- Language: JavaScript
- Homepage:
- Size: 5.86 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# cy-tkey-screenshot
Automatically generate screenshots for your translation keys using Cypress.
## Setup
### Install cy-tkey-screenshot
Add cy-tkey-screenshot as a dependency in your project:
*Using `npm`:*
```bash
npm install cy-tkey-screenshot --save-dev
```
*Using `yarn`:*
```bash
yarn add --dev cy-tkey-screenshot
```
### Set up Cypress to use cy-tkey-screenshot
Import *cy-tkey-screenshot* in your *cypress/support/commands.js* file:
```javascript
// cypress/support/commands.js
require("cy-tkey-screenshot")
```
or
```javascript
// cypress/support/commands.js
import "cy-tkey-screenshot"
```
## Usage
You'll need to call this command in your Cypress tests:
```javascript
cy.generateTranslationScreenshots()
```
This command will look at the elements on your page, find any translation keys and generate the screenshots.
For this to work, your elements need to have the `data-tkey` [data attribute](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes#HTML_syntax):
```html
Hello World!
```
Depending on how your app is implemented, there might be very easy ways of adding that automatically. For example, if you are using React and have a translation component, you might simply add this data attribute in your component.
I recommend using cy-tkey-screenshot if you have good E2E coverage in Cypress: in that case, most likely you can just add `cy.generateTranslationScreenshots()` to some existing code, or even just when the `window:load` [event](https://docs.cypress.io/api/events/catalog-of-events.html#Event-Types) happens in Cypress. In [LibreLingo](https://github.com/kantord/LibreLingo), we use this as part of the visual regression testing, so addign it means no extra effort: we get these screenshots essentially for free.
If you don't have a good E2E coverage or don't even have Cypress set up, then you'll probably not see much benefit from cy-tkey-screenshot, and would just be better off creating the screenshots manually.