Skip to content

Commit

Permalink
PR discussions updates
Browse files Browse the repository at this point in the history
  • Loading branch information
rohalskyy committed Nov 25, 2024
1 parent 1765ba0 commit 290969b
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 21 deletions.
2 changes: 1 addition & 1 deletion src/content/docs/developer/capabilities/in-context.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ This feature allows you to take a screenshot of the opened website page, upload
<LinkCard
title="Automated Screenshot Management"
description="Learn how to automate screenshot creation and updates."
href="/developer/automated-screenshot-management/"
href="/developer/automating-screenshot-management/"
/>

## Troubleshooting and Common Questions
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Automating Screenshot Management
description: Learn how to automate screenshot creation and updates with Crowdin In-Context and Playwright
slug: developer/automated-screenshot-management
slug: developer/automating-screenshot-management
---

import { Steps } from '@astrojs/starlight/components';
Expand All @@ -10,30 +10,44 @@ This guide explains how to automate generating and updating screenshots in Crowd

By automating screenshot creation, translators gain accurate and up-to-date visual context, improving the localization process and translation quality. The guide covers prerequisites, setup instructions, capturing screenshots across web pages, and uploading them to Crowdin via API.

**Prerequisites**:
## Prerequisites

Ensure the following are set up before proceeding:
Before proceeding, ensure that your website integrates [Crowdin In-Context functionality](/developer/in-context-localization/#integration).

* **Crowdin In-Context Integration**: Verify that your website integrates Crowdin In-Context functionality.
* **Testing Framework**: This guide uses [Playwright](https://playwright.dev/) for browser automation.
* **Two-Factor Authentication Setup**: This guide uses OTPLib Authentication for automated tests. Configure [Two-Factor Authentication (2FA)](/project-settings/privacy-collaboration/#privacy) for your Crowdin project to replace email-based device verification and simplify automation:
<Steps>
1. **Enable 2FA in Crowdin**: Open your project and go to **Settings > Privacy & collaboration > Privacy** to set up Two-factor authentication for login.
2. **Disable Device Verification**: Device verification ensures account security but can interrupt automated workflows. Disabling it for testing environments ensures uninterrupted automation.
* For Crowdin: Go to **Account Settings > Account > New device verification** and disable the setting.
* For Crowdin Enterprise: Go to **Account Settings > Security > Device Verification** and disable the setting.
3. **Generate a Secret Key**: Obtain the secret key for generating 2FA tokens. This key is required for programmatically creating one-time passwords (OTPs) using the `otplib` library.
</Steps>
### Account Setup

Install the required dependencies for your automation:
To configure your account for automation to function properly, follow these steps:

```json
<Steps>
1. **Enable 2FA in Crowdin**: Open your project and go to **Settings > Privacy & collaboration > Privacy** to set up Two-factor authentication for login.
2. **Disable Device Verification**: Device verification ensures account security but can interrupt automated workflows. Disabling it for testing environments ensures uninterrupted automation.
* For Crowdin: Go to **Account Settings > Account > New device verification** and disable the setting.
* For Crowdin Enterprise: Go to **Account Settings > Security > Device Verification** and disable the setting.
3. **Generate a Secret Key**: Obtain the secret key for generating 2FA tokens. This key is required for programmatically creating one-time passwords (OTPs) using the `otplib` library.
</Steps>

### Dependencies

This guide uses the following dependencies for browser automation and OTP generation:

- [Playwright](https://playwright.dev/): A modern testing framework for browser automation, ideal for navigating and interacting with web pages.
- `otplib`: A library for generating one-time passwords (OTPs) programmatically, essential for bypassing 2FA in automated workflows.

To install these dependencies, add them to your `package.json` file:

```json title="package.json"
"dependencies": {
"@playwright/test": "latest",
"otplib": "latest"
}
```

Once the dependencies are added to the `package.json` file, run the following command to install them:

```bash
npm install
```

## Capturing Screenshots with Crowdin In-Context

Crowdin provides the `window.jipt.capture_screenshot(name: string, options: object | null)` method to automate screenshot generation. In addition to screenshots, this method collects metadata to provide translators with detailed and accurate context for their work. The following sections explain how to implement this functionality using Playwright.
Expand Down Expand Up @@ -93,9 +107,9 @@ test('Capture Crowdin Screenshots', async ({ page }) => {
* **Navigating Pages**: Use `page.goto(url)` to navigate to specific pages in your application.
* **Logging In**: Simulate user actions, such as filling out forms and clicking buttons, using Playwright’s locators like `getByRole()` and `getByLabel()`.
* **Capturing Screenshots**: Use `window.jipt.capture_screenshot()` to generate and upload screenshots to Crowdin. The method accepts the following parameters:
* **name (string)**: The name of the screenshot.
* **options (object | null)**: Custom settings:
* **override (boolean)**: The `override` parameter determines how Crowdin handles screenshots with duplicate names. Use `true` (default) to overwrite the first matching screenshot or `false` to create a new one, even if the name matches.
* **success (function)**: A callback function triggered on successful upload.
* **error (function)**: A callback function triggered on upload failure.
* `name (string)`: The name of the screenshot.
* `options (object | null)`: Custom settings:
* `override (boolean)`: The `override` parameter determines how Crowdin handles screenshots with duplicate names. Use `true` (default) to overwrite the first matching screenshot or `false` to create a new one, even if the name matches.
* `success (function)`: A callback function triggered on successful upload.
* `error (function)`: A callback function triggered on upload failure.
* **Two-Factor Authentication**: Use the `otplib` library to programmatically generate OTP tokens when 2FA is enabled. Replace `'KEY'` with your project's secret key for valid OTP generation.

0 comments on commit 290969b

Please sign in to comment.