constants.ts•28.1 kB
import { PERCY_SNAPSHOT_INSTRUCTION } from "../common/constants.js";
export const percyReviewSnapshotsStep = `
---STEP---
Review the snapshots
- Go to your Percy project on https://percy.io to review snapshots and approve/reject any visual changes.
`;
export const pythonInstructionsSnapshot = `
Example:
\`\`\`python
- Import the Percy snapshot helper:
from selenium import webdriver
from percy import percy_snapshot
driver = webdriver.Chrome()
driver.get('http://localhost:8000')
percy_snapshot(driver, 'Home page')
# ... more test steps ...
percy_snapshot(driver, 'After login')
\`\`\`
`;
export const nodejsInstructionsSnapshot = `
- Import the Percy snapshot helper:
const { percySnapshot } = require('@percy/selenium-js');
- In your test, take snapshots like this:
await percySnapshot(driver, "Your snapshot name");
Example:
\`\`\`javascript
const { Builder } = require('selenium-webdriver');
const percySnapshot = require('@percy/selenium-webdriver');
const driver = await new Builder().forBrowser('chrome').build();
await driver.get('http://localhost:8000');
await percySnapshot(driver, 'Home page');
\`\`\`
`;
export const javaInstructionsSnapshot = `
- Import the Percy snapshot helper:
import io.percy.selenium.Percy;
- In your test, take snapshots like this:
Percy percy = new Percy(driver);
percy.snapshot("Your snapshot name");
Example:
\`\`\`java
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import io.percy.selenium.Percy;
public class PercyExample {
public static void main(String[] args) {
WebDriver driver = new ChromeDriver();
driver.get("http://localhost:8000");
Percy percy = new Percy(driver);
percy.snapshot("Home page");
driver.quit();
}
}
\`\`\``;
export const rubyInstructionsSnapshot = `
- Require the Percy snapshot helper:
require 'percy'
- In your test, take snapshots like this:
Percy.snapshot(page, 'Your snapshot name')
Example:
\`\`\`ruby
require 'selenium-webdriver'
require 'percy'
driver = Selenium::WebDriver.for :chrome
driver.get('http://localhost:8000')
Percy.snapshot(driver, 'Your snapshot name')
driver.quit
\`\`\`
`;
export const rubyCapybaraInstructionsSnapshot = `
- In your test setup file, require percy/capybara:
require 'percy/capybara'
- In your test, take snapshots like this:
page.percy_snapshot('Capybara snapshot')
Example:
\`\`\`ruby
require 'percy/capybara'
describe 'my feature', type: :feature do
it 'renders the page' do
visit 'https://example.com'
page.percy_snapshot('Capybara snapshot')
end
end
\`\`\`
- The snapshot method arguments are:
page.percy_snapshot(name[, options])
name - The snapshot name; must be unique to each snapshot; defaults to the test title
options - See per-snapshot configuration options
`;
export const csharpInstructionsSnapshot = `
- Import the Percy snapshot helper:
using PercyIO.Selenium;
- In your test, take snapshots like this:
Percy.Snapshot(driver,"Your snapshot name");
Example:
\`\`\`csharp
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using PercyIO.Selenium;
class PercyExample
{
static void Main()
{
IWebDriver driver = new ChromeDriver();
driver.Navigate().GoToUrl("http://localhost:8000");
Percy.Snapshot(driver,"Empty Todo State");
driver.Quit();
}
}
\`\`\`
`;
export const javaPlaywrightInstructionsSnapshot = `
- Import the Percy library and use the snapshot method:
percy.snapshot("snapshot_1");
- You can also pass options:
Map<String, Object> options = new HashMap<>();
options.put("testCase", "Should add product to cart");
percy.snapshot("snapshot_2", options);
Example:
\`\`\`java
import com.microsoft.playwright.*;
import io.percy.playwright.*;
public class PercyPlaywrightExample {
public static void main(String[] args) {
try (Playwright playwright = Playwright.create()) {
Browser browser = playwright.chromium().launch();
Page page = browser.newPage();
Percy percy = new Percy(page);
page.navigate("http://localhost:8000");
percy.snapshot("Home page");
// ... more test steps ...
percy.snapshot("After login");
browser.close();
}
}
}
\`\`\`
`;
export const nodejsPlaywrightInstructionsSnapshot = `
- Import the Percy snapshot helper:
const percySnapshot = require('@percy/playwright');
- In your test, take snapshots like this:
await percySnapshot(page, "Your snapshot name");
Example:
\`\`\`javascript
const { chromium } = require('playwright');
const percySnapshot = require('@percy/playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('http://example.com/', { waitUntil: 'networkidle' });
await percySnapshot(page, 'Example Site');
await browser.close();
})();
\`\`\`
`;
export const nodejsWebdriverioInstructionsSnapshot = `
- Import the Percy snapshot helper:
const percySnapshot = require('@percy/selenium-webdriver');
- In your test, take snapshots like this:
await percySnapshot(driver, "Your snapshot name");
Example:
\`\`\`javascript
const { remote } = require('webdriverio');
const percySnapshot = require('@percy/selenium-webdriver');
(async () => {
const browser = await remote({
logLevel: 'error',
capabilities: { browserName: 'chrome' }
});
await browser.url('https://example.com');
await percySnapshot(browser, 'WebdriverIO example');
await browser.deleteSession();
})();
\`\`\`
`;
export const nodejsEmberInstructionsSnapshot = `
- Import the Percy snapshot helper:
import percySnapshot from '@percy/ember';
- In your test, take snapshots like this:
await percySnapshot('My Snapshot');
Example:
\`\`\`javascript
import percySnapshot from '@percy/ember';
describe('My ppp', () => {
// ...app setup
it('about page should look good', async () => {
await visit('/about');
await percySnapshot('My Snapshot');
});
});
\`\`\`
- The snapshot method arguments are:
percySnapshot(name[, options])
name - The snapshot name; must be unique to each snapshot; defaults to the test title
options - See per-snapshot configuration options
`;
export const nodejsCypressInstructionsSnapshot = `
- Import the Percy snapshot helper in your cypress/support/e2e.js file:
import '@percy/cypress';
- If you’re using TypeScript, include "types": ["cypress", "@percy/cypress"] in your tsconfig.json file.
- In your test, take snapshots like this:
cy.percySnapshot();
Example:
\`\`\`javascript
import '@percy/cypress';
describe('Integration test with visual testing', function() {
it('Loads the homepage', function() {
// Load the page or perform any other interactions with the app.
cy.visit('<URL under test>');
// Take a snapshot for visual diffing
cy.percySnapshot();
});
});
\`\`\`
- The snapshot method arguments are:
cy.percySnapshot([name][, options])
name - The snapshot name; must be unique to each snapshot; defaults to the test title
options - See per-snapshot configuration options
- For example:
cy.percySnapshot();
cy.percySnapshot('Homepage test');
cy.percySnapshot('Homepage responsive test', { widths: [768, 992, 1200] });
`;
export const nodejsPuppeteerInstructionsSnapshot = `
- Import the Percy snapshot helper:
const percySnapshot = require('@percy/puppeteer');
- In your test, take snapshots like this:
await percySnapshot(page, 'Snapshot name');
Example:
\`\`\`javascript
const puppeteer = require('puppeteer');
const percySnapshot = require('@percy/puppeteer');
describe('Integration test with visual testing', function() {
it('Loads the homepage', async function() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
await percySnapshot(page, this.test.fullTitle());
await browser.close();
});
});
\`\`\`
- The snapshot method arguments are:
percySnapshot(page, name[, options])
page (required) - A puppeteer page instance
name (required) - The snapshot name; must be unique to each snapshot
options - See per-snapshot configuration options
- For example:
percySnapshot(page, 'Homepage test');
percySnapshot(page, 'Homepage responsive test', { widths: [768, 992, 1200] });
`;
export const nodejsNightmareInstructionsSnapshot = `
- Import the Percy snapshot helper:
const Nightmare = require('nightmare');
const percySnapshot = require('@percy/nightmare');
- In your test, take snapshots like this:
.use(percySnapshot('Snapshot name'))
Example:
\`\`\`javascript
const Nightmare = require('nightmare');
const percySnapshot = require('@percy/nightmare');
Nightmare()
.goto('http://example.com')
// ... other actions ...
.use(percySnapshot('Example Snapshot'))
// ... more actions ...
.end()
.then(() => {
// ...
});
\`\`\`
- The snapshot method arguments are:
percySnapshot(name[, options])
name (required) - The snapshot name; must be unique to each snapshot
options - See per-snapshot configuration options
`;
export const nodejsNightwatchInstructionsSnapshot = `
- Import the Percy library and add the path exported by @percy/nightwatch to your Nightwatch configuration’s custom_commands_path property:
const percy = require('@percy/nightwatch');
module.exports = {
// ...
custom_commands_path: [percy.path],
// ...
};
- In your test, take snapshots like this:
browser.percySnapshot('Snapshot name');
Example:
\`\`\`javascript
const percy = require('@percy/nightwatch');
module.exports = {
// ...
custom_commands_path: [percy.path],
// ...
};
// Example test
module.exports = {
'Snapshots pages': function(browser) {
browser
.url('http://example.com')
.assert.containsText('h1', 'Example Domain')
.percySnapshot('Example snapshot');
browser
.url('http://google.com')
.assert.elementPresent('img[alt="Google"]')
.percySnapshot('Google homepage');
browser.end();
}
};
\`\`\`
- The snapshot method arguments are:
percySnapshot([name][, options])
name (required) - The snapshot name; must be unique to each snapshot
options - See per-snapshot configuration options
`;
export const nodejsProtractorInstructionsSnapshot = `
- Import the Percy snapshot helper:
import percySnapshot from '@percy/protractor';
- In your test, take snapshots like this:
await percySnapshot('Snapshot name');
// or
await percySnapshot(browser, 'Snapshot name');
Example:
\`\`\`javascript
import percySnapshot from '@percy/protractor';
describe('angularjs homepage', function() {
it('should greet the named user', async function() {
await browser.get('https://www.angularjs.org');
await percySnapshot('AngularJS homepage');
await element(by.model('yourName')).sendKeys('Percy');
var greeting = element(by.binding('yourName'));
expect(await greeting.getText()).toEqual('Hello Percy!');
await percySnapshot('AngularJS homepage greeting');
});
});
\`\`\`
- The snapshot method arguments are:
percySnapshot(name[, options])
Standalone mode:
percySnapshot(browser, name[, options])
browser (required) - The Protractor browser object
name (required) - The snapshot name; must be unique to each snapshot
options - See per-snapshot configuration options
`;
export const nodejsTestcafeInstructionsSnapshot = `
- Import the Percy snapshot helper:
import percySnapshot from '@percy/testcafe';
- In your test, take snapshots like this:
await percySnapshot(t, 'Snapshot name');
Example:
\`\`\`javascript
import percySnapshot from '@percy/testcafe';
fixture('MyFixture')
.page('https://devexpress.github.io/testcafe/example');
test('Test1', async t => {
await t.typeText('#developer-name', 'John Doe');
await percySnapshot(t, 'TestCafe Example');
});
\`\`\`
- The snapshot method arguments are:
percySnapshot(t, name[, options])
t (required) - The test controller instance passed from test
name (required) - The snapshot name; must be unique to each snapshot
options - See per-snapshot configuration options
`;
export const nodejsGatsbyInstructionsSnapshot = `
- Add the Percy plugin to your gatsby-config.js file:
module.exports = {
plugins: [\`gatsby-plugin-percy\`]
}
- The plugin will take snapshots of discovered pages during the build process.
- Example gatsby-config.js with options:
\`\`\`javascript
module.exports = {
plugins: [{
resolve: \`gatsby-plugin-percy\`,
options: {
// gatsby specific options
query: \`{
allSitePage { nodes { path } }
allOtherPage { nodes { path } }
}\`,
resolvePages: ({
allSitePage: { nodes: allPages },
allOtherPage: { nodes: otherPages }
}) => {
return [...allPages, ...otherPages]
.map(({ path }) => path);
},
// percy static snapshot options
exclude: [
'/dev-404-page/',
'/offline-plugin-app-shell-fallback/'
],
overrides: [{
include: '/foobar/',
waitForSelector: '.done-loading',
additionalSnapshots: [{
suffix: ' - after btn click',
execute: () => document.querySelector('.btn').click()
}]
}]
}
}]
}
\`\`\`
`;
export const nodejsStorybookInstructionsSnapshot = `
- Add Percy parameters to your stories to customize snapshots:
\`\`\`js
MyStory.parameters = {
percy: {
name: 'My snapshot',
additionalSnapshots: [
{ prefix: '[Dark mode] ', args: { colorScheme: 'dark' } },
{ suffix: ' with globals', globals: { textDirection: 'rtl' } },
{ name: 'Search snapshot', queryParams: { search: 'foobar' } }
]
}
};
\`\`\`
- Use argument names and values defined in your codebase.
`;
export const pythonPlaywrightInstructionsSnapshot = `
- Import the Percy snapshot helper and use the snapshot method:
percy_snapshot(page, name="Your snapshot name")
- You can also use:
percy_screenshot(page, name="Your snapshot name", options={})
Example:
\`\`\`python
from playwright.sync_api import sync_playwright
from percy import percy_snapshot
with sync_playwright() as p:
browser = p.chromium.launch()
page = browser.new_page()
page.goto("http://localhost:8000")
percy_snapshot(page, name="Home page")
# ... more test steps ...
percy_snapshot(page, name="After login")
browser.close()
\`\`\`
`;
export const csharpPlaywrightInstructionsSnapshot = `
- Import the Percy snapshot helper and use the snapshot method:
Percy.Snapshot(page, "Your snapshot name");
- You can also pass options:
Percy.Snapshot(page, "Your snapshot name", options);
Example:
\`\`\`csharp
using Microsoft.Playwright;
using PercyIO.Playwright;
class PercyPlaywrightExample
{
public static async Task Main()
{
using var playwright = await Playwright.CreateAsync();
var browser = await playwright.Chromium.LaunchAsync();
var page = await browser.NewPageAsync();
await page.GotoAsync("http://localhost:8000");
Percy.Snapshot(page, "Home page");
// ... more test steps ...
Percy.Snapshot(page, "After login");
await browser.CloseAsync();
}
}
\`\`\`
`;
export const pythonInstructions = `
Install Percy dependencies
- Install Percy CLI:
npm install --save-dev @percy/cli
- Install Percy Selenium Python package:
pip install percy-selenium
If faced any issue create a virtual environment and proceed.
Update your Python Selenium script
${PERCY_SNAPSHOT_INSTRUCTION}
${pythonInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- python tests.py').
${percyReviewSnapshotsStep}
`;
export const nodejsInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI:
npm install --save-dev @percy/cli
- Install Percy SDK for Node.js:
npm install @percy/selenium-webdriver
---STEP---
Update your Node.js Selenium script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- node script.js').
${percyReviewSnapshotsStep}
`;
export const javaInstructions = `
---STEP---
Add Percy dependencies to your project
- For Maven, add to your pom.xml:
<dependency>
<groupId>io.percy</groupId>
<artifactId>percy-java-selenium</artifactId>
<version>1.0.0</version>
</dependency>
- For Gradle, add to your build.gradle:
implementation 'io.percy:percy-java-selenium:1.0.0'
- For CLI usage, install Percy CLI:
npm install --save-dev @percy/cli
---STEP---
Update your Java Selenium test
${PERCY_SNAPSHOT_INSTRUCTION}
${javaInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- mvn test').
${percyReviewSnapshotsStep}
`;
export const rubyInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI:
npm install --save-dev @percy/cli
- Install Percy Ruby Selenium gem:
gem install percy-selenium
---STEP---
Update your Ruby Selenium test
${PERCY_SNAPSHOT_INSTRUCTION}
${rubyInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- bundle exec rspec').
${percyReviewSnapshotsStep}
`;
// Percy Capybara instructions for Ruby
export const rubyCapybaraInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI:
npm install --save-dev @percy/cli
- Install Percy Capybara gem:
gem install percy-capybara
---STEP---
Update your Capybara or Rails test script
${PERCY_SNAPSHOT_INSTRUCTION}
${rubyCapybaraInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- bundle exec rspec').
${percyReviewSnapshotsStep}
`;
export const csharpInstructions = `
Install Percy CLI by running the following command:
npm install --save-dev @percy/cli
---STEP---
Add Percy dependencies to your project
- Add the Percy .NET Selenium NuGet package:
dotnet add package PercyIO.Selenium
---STEP---
Update your C# Selenium test
${PERCY_SNAPSHOT_INSTRUCTION}
${csharpInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- dotnet test').
${percyReviewSnapshotsStep}
`;
export const javaPlaywrightInstructions = `
Install Percy dependencies
- For Maven, add to your pom.xml:
<dependency>
<groupId>io.percy</groupId>
<artifactId>percy-playwright-java</artifactId>
<version>1.0.0</version>
</dependency>
---STEP---
Update your Java Playwright test
${PERCY_SNAPSHOT_INSTRUCTION}
${javaPlaywrightInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g. npx percy exec -- <command to run the test script file>).
${percyReviewSnapshotsStep}
`;
export const nodejsPlaywrightInstructions = `
Install Percy dependencies
- Install Percy Playwright SDK:
npm install @percy/playwright
---STEP---
Update your Playwright JavaScript test
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsPlaywrightInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., npx percy exec -- <command to run the test script file>).
${percyReviewSnapshotsStep}
`;
// Percy WebdriverIO instructions for JavaScript
export const nodejsWebdriverioInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI:
npm install --save-dev @percy/cli
- Install Percy Selenium Webdriver package:
npm install --save-dev @percy/selenium-webdriver
---STEP---
Update your WebdriverIO test script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsWebdriverioInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- wdio run wdio.conf.js').
${percyReviewSnapshotsStep}
`;
// Percy Ember instructions for JavaScript
export const nodejsEmberInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and Ember SDK:
npm install --save-dev @percy/cli @percy/ember
---STEP---
Update your Ember test script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsEmberInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- ember test').
${percyReviewSnapshotsStep}
`;
// Percy Cypress instructions for JavaScript
export const nodejsCypressInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and Cypress SDK:
npm install --save-dev @percy/cli @percy/cypress
---STEP---
Update your Cypress test script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsCypressInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- cypress run').
${percyReviewSnapshotsStep}
`;
// Percy Puppeteer instructions for JavaScript
export const nodejsPuppeteerInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and Puppeteer SDK:
npm install --save-dev @percy/cli @percy/puppeteer
---STEP---
Update your Puppeteer test script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsPuppeteerInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- <command to run the test script file>').
${percyReviewSnapshotsStep}
`;
// Percy Nightmare instructions for JavaScript
export const nodejsNightmareInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and Nightmare SDK:
npm install --save-dev @percy/cli @percy/nightmare
---STEP---
Update your Nightmare test script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsNightmareInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- node script.js').
${percyReviewSnapshotsStep}
`;
// Percy Nightwatch instructions for JavaScript
export const nodejsNightwatchInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and Nightwatch SDK:
npm install --save-dev @percy/cli @percy/nightwatch
---STEP---
Update your Nightwatch configuration and test script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsNightwatchInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- nightwatch').
${percyReviewSnapshotsStep}
`;
// Percy Protractor instructions for JavaScript
export const nodejsProtractorInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and Protractor SDK:
npm install --save-dev @percy/cli @percy/protractor
---STEP---
Update your Protractor test script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsProtractorInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- protractor conf.js').
${percyReviewSnapshotsStep}
`;
// Percy TestCafe instructions for JavaScript
export const nodejsTestcafeInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and TestCafe SDK:
npm install --save-dev @percy/cli @percy/testcafe
---STEP---
Update your TestCafe test script
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsTestcafeInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- testcafe chrome:headless tests').
${percyReviewSnapshotsStep}
`;
// Percy Gatsby instructions for JavaScript
export const nodejsGatsbyInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and Gatsby plugin:
npm install --save @percy/cli gatsby-plugin-percy
---STEP---
Update your Gatsby configuration
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsGatsbyInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g., 'npx percy exec -- gatsby build').
${percyReviewSnapshotsStep}
`;
// Percy Storybook instructions for JavaScript
export const nodejsStorybookInstructions = `
---STEP---
Install Percy dependencies
- Install Percy CLI and Storybook SDK:
npm install --save-dev @percy/cli @percy/storybook
---STEP---
Update your Storybook stories
${PERCY_SNAPSHOT_INSTRUCTION}
${nodejsStorybookInstructionsSnapshot}
---STEP---
Run Percy with your Storybook
- With a static Storybook build:
percy storybook ./storybook-build
- With a local or live Storybook URL:
percy storybook http://localhost:9009
percy storybook https://storybook.foobar.com
- Automatically run start-storybook:
Run this scan using tool runPercyScan with 'npx percy exec -- percy storybook:start --port=9009'.
${percyReviewSnapshotsStep}
`;
export const pythonPlaywrightInstructions = `
---STEP---
Create a Percy project
- Sign in to Percy and create a project of type "Web". Name the project and note the generated token.
---STEP---
Set the project token as an environment variable
- On macOS/Linux:
export PERCY_TOKEN="<your token here>"
- On Windows PowerShell:
$env:PERCY_TOKEN="<your token here>"
- On Windows CMD:
set PERCY_TOKEN=<your token here>
---STEP---
Install Percy dependencies
- Install Percy Playwright SDK:
pip install percy-playwright
---STEP---
Update your Playwright Python test
${PERCY_SNAPSHOT_INSTRUCTION}
${pythonPlaywrightInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g. npx percy exec -- <command to run the test script file>).
${percyReviewSnapshotsStep}
`;
export const csharpPlaywrightInstructions = `
Install Percy dependencies
- Add the Percy Playwright NuGet package:
<PackageReference Include="PercyIO.Playwright" Version="1.0.0" />
---STEP---
Update your Playwright .NET test
${PERCY_SNAPSHOT_INSTRUCTION}
${csharpPlaywrightInstructionsSnapshot}
---STEP---
To run the Percy build, call the tool runPercyScan with the appropriate test command (e.g. npx percy exec -- <command to run the test script file>).
${percyReviewSnapshotsStep}
`;
export function getFrameworkTestCommand(
language: string,
framework: string,
): string {
const percyPrefix = "npx percy exec --labels=mcp --";
const nodeCommands: Record<string, string> = {
cypress: "cypress run",
playwright: "playwright test",
webdriverio: "wdio",
puppeteer: "node",
testcafe: "testcafe",
nightwatch: "nightwatch",
protractor: "protractor",
gatsby: "gatsby build",
storybook: "storybook build",
ember: "ember test",
default: "npm test",
};
const languageMap: Record<string, string> = {
python: "python -m pytest",
java: "mvn test",
ruby: "bundle exec rspec",
csharp: "dotnet test",
};
if (language === "nodejs") {
const cmd = nodeCommands[framework] ?? nodeCommands.default;
return `${percyPrefix} ${cmd}`;
}
const cmd = languageMap[language];
return cmd ? `${percyPrefix} ${cmd}` : `${percyPrefix} <test-runner>`;
}
export const PERCY_FALLBACK_STEPS = [
`Attempt to infer the project's test command from context (high confidence commands first):
- Node.js: npm test, cypress run, npx playwright test, npx wdio, npx testcafe, npx nightwatch, npx protractor, ember test, npx gatsby build, npx storybook build
- Python: python -m pytest
- Java: mvn test
- Ruby: bundle exec rspec
- C#: dotnet test
or from package.json scripts`,
`Wrap the inferred command with Percy along with label: \nnpx percy exec --labels=mcp -- <test command>`,
`If the test command cannot be inferred confidently, ask the user directly for the correct test command.`,
];