BranchesTags

Repository files navigation

example-percy-playwright-python

Example repo for demonstrating Percy Web/Percy on Automate integration with python using playwright.

Python Playwright Tutorial

The tutorial assumes you're already familiar with Python and Playwright and focuses on using it with Percy. You'll still be able to follow along if you're not familiar with Python, Playwright, but we won't spend time introducing Python, Playwright concepts.

The tutorial also assumes you have Node 16+ with npm and git installed.

Step 1

Clone the example application and install dependencies:

Minimum required @percy/cli version is 1.28.8-beta.3 onwards for this to work correctly. If you already have @percy/cli installed please update it to latest or minium required version.

$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]# install the required packages
$ pip3 install -r requirements.txt
$ npm install

This tutorial specifically uses Browserstack Automate for Percy on Automate to run playwright test. For Percy Web you can run the scripts directly after setting up PERCY_TOKEN.

Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need Browserstack Automate setup for the same. For automate you will need credentials so refer to following instructions to get the same.

  1. You will need a BrowserStack username and access key. To obtain your access credentials, sign up for a free trial or purchase a plan.

  2. Please get your username and access key from profile page.

Step 2

Sign in to Percy and create a new Automate project under Web category. You can name the project "test-project" if you'd like. After you've created the project, you'll be shown a token environment variable.

Step 3

In the shell window you're working in, export the token and other environment variable:

PERCY_TOKEN is used by percy to identify the project and create the builds.

Note: In case of web projects, token will start with web_ keyword.

Note: In case of automate projects, token will start with auto_ keyword.

Unix

$ export PERCY_TOKEN="<your token here>"

Windows

$ set PERCY_TOKEN="<your token here>"# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"

Set the necessary BROWSERSTACK ENVIRONMENT variables, only required for Percy on Automate examples

Unix

$ export BROWSERSTACK_USERNAME="<your browserstack user_name>"
$ export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"

Windows

$ set BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"# PowerShell
$ $Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"

Alternatively you can also update USER_NAME, ACCESS_KEY with Browserstack User name, Access key in the script as well.

Step 4

Considering all the above steps are done, we will run our tests, which will create automate session as well as percy build.

For Percy Web

Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.

$ npx percy exec -- python3 tests/web/test.py

Your First Percy Web build is created. On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.

For Percy on Automate

$ npx percy exec -- python3 tests/automate/test.py

Your First Percy on Automate build is created. On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.

Step 5

Go to Percy Dashboard and ensure that your base build is approved. Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to file in test.py and make changes.

page.click('//*[@id="1"]/div[4]') # Say change id to 3

Or else just run after_test.py, we have already made visual changes in this script. If you run the after_test.py script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.

For Percy Web

$ npx percy exec -- python3 tests/web/after_test.py

For Percy on Automate

$ npx percy exec -- python3 tests/automate/after_test.py

On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.

Finished! 😀

From here, you can try making your own changes to the website and functional tests, if you like. If you do, re-run the tests and you'll see any visual changes reflected in Percy.

About

Example demonstrating Percy's Python Playwright integration.

Resources

Readme
License
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
example-percy-playwright-python
Example repo for demonstrating Percy Web/Percy on Automate integration with python using playwright.
Python Playwright Tutorial
The tutorial assumes you're already familiar with Python and
Playwright and focuses on using it with Percy. You'll still
be able to follow along if you're not familiar with Python, Playwright, but we won't
spend time introducing Python, Playwright concepts.
The tutorial also assumes you have Node 16+ with
npm and
git installed.
Step 1
Clone the example application and install dependencies:
Minimum required @percy/cli version is 1.28.8-beta.3 onwards for this to work correctly. If you already have @percy/cli installed please update it to latest or minium required version.
$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]# install the required packages
$ pip3 install -r requirements.txt
$ npm install
This tutorial specifically uses Browserstack Automate for Percy on Automate to run playwright test.
For Percy Web you can run the scripts directly after setting up PERCY_TOKEN.
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need Browserstack Automate setup for the same.
For automate you will need credentials so refer to following instructions to get the same.
  1. You will need a BrowserStack username and access key. To obtain your access credentials, sign up for a free trial or purchase a plan.
  2. Please get your username and access key from profile page.
Step 2
Sign in to Percy and create a new Automate project under Web category. You can name the project "test-project" if you'd like. After
you've created the project, you'll be shown a token environment variable.
Step 3
In the shell window you're working in, export the token and other environment variable:
PERCY_TOKEN is used by percy to identify the project and create the builds.
Note: In case of web projects, token will start with web_ keyword.
Note: In case of automate projects, token will start with auto_ keyword.
Unix
$ export PERCY_TOKEN="<your token here>"
Windows
$ set PERCY_TOKEN="<your token here>"# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"
Set the necessary BROWSERSTACK ENVIRONMENT variables, only required for Percy on Automate examples
Unix
$ export BROWSERSTACK_USERNAME="<your browserstack user_name>"
$ export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Windows
$ set BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"# PowerShell
$ $Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Alternatively you can also update USER_NAME, ACCESS_KEY with Browserstack User name, Access key in the script as well.
Step 4
Considering all the above steps are done, we will run our tests, which will create automate session as well as percy build.
For Percy Web
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.
$ npx percy exec -- python3 tests/web/test.py
Your First Percy Web build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
For Percy on Automate
$ npx percy exec -- python3 tests/automate/test.py
Your First Percy on Automate build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
Step 5
Go to Percy Dashboard and ensure that your base build is approved.
Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to file in test.py and make changes.
page.click('//*[@id="1"]/div[4]') # Say change id to 3
Or else just run after_test.py, we have already made visual changes in this script. If you run the after_test.py script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.
For Percy Web
$ npx percy exec -- python3 tests/web/after_test.py
For Percy on Automate
$ npx percy exec -- python3 tests/automate/after_test.py
On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.
Finished! 😀
From here, you can try making your own changes to the website and functional tests, if you like. If you do, re-run the tests and you'll see any visual changes reflected in Percy.
About
Example demonstrating Percy's Python Playwright integration.
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
example-percy-playwright-python
Example repo for demonstrating Percy Web/Percy on Automate integration with python using playwright.
Python Playwright Tutorial
The tutorial assumes you're already familiar with Python and
Playwright and focuses on using it with Percy. You'll still
be able to follow along if you're not familiar with Python, Playwright, but we won't
spend time introducing Python, Playwright concepts.
The tutorial also assumes you have Node 16+ with
npm and
git installed.
Step 1
Clone the example application and install dependencies:
Minimum required @percy/cli version is 1.28.8-beta.3 onwards for this to work correctly. If you already have @percy/cli installed please update it to latest or minium required version.
$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]# install the required packages
$ pip3 install -r requirements.txt
$ npm install
This tutorial specifically uses Browserstack Automate for Percy on Automate to run playwright test.
For Percy Web you can run the scripts directly after setting up PERCY_TOKEN.
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need Browserstack Automate setup for the same.
For automate you will need credentials so refer to following instructions to get the same.
  1. You will need a BrowserStack username and access key. To obtain your access credentials, sign up for a free trial or purchase a plan.
  2. Please get your username and access key from profile page.
Step 2
Sign in to Percy and create a new Automate project under Web category. You can name the project "test-project" if you'd like. After
you've created the project, you'll be shown a token environment variable.
Step 3
In the shell window you're working in, export the token and other environment variable:
PERCY_TOKEN is used by percy to identify the project and create the builds.
Note: In case of web projects, token will start with web_ keyword.
Note: In case of automate projects, token will start with auto_ keyword.
Unix
$ export PERCY_TOKEN="<your token here>"
Windows
$ set PERCY_TOKEN="<your token here>"# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"
Set the necessary BROWSERSTACK ENVIRONMENT variables, only required for Percy on Automate examples
Unix
$ export BROWSERSTACK_USERNAME="<your browserstack user_name>"
$ export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Windows
$ set BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"# PowerShell
$ $Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Alternatively you can also update USER_NAME, ACCESS_KEY with Browserstack User name, Access key in the script as well.
Step 4
Considering all the above steps are done, we will run our tests, which will create automate session as well as percy build.
For Percy Web
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.
$ npx percy exec -- python3 tests/web/test.py
Your First Percy Web build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
For Percy on Automate
$ npx percy exec -- python3 tests/automate/test.py
Your First Percy on Automate build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
Step 5
Go to Percy Dashboard and ensure that your base build is approved.
Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to file in test.py and make changes.
page.click('//*[@id="1"]/div[4]') # Say change id to 3
Or else just run after_test.py, we have already made visual changes in this script. If you run the after_test.py script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.
For Percy Web
$ npx percy exec -- python3 tests/web/after_test.py
For Percy on Automate
$ npx percy exec -- python3 tests/automate/after_test.py
On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.
Finished! 😀
From here, you can try making your own changes to the website and functional tests, if you like. If you do, re-run the tests and you'll see any visual changes reflected in Percy.
About
Example demonstrating Percy's Python Playwright integration.
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
example-percy-playwright-python
Example repo for demonstrating Percy Web/Percy on Automate integration with python using playwright.
Python Playwright Tutorial
The tutorial assumes you're already familiar with Python and
Playwright and focuses on using it with Percy. You'll still
be able to follow along if you're not familiar with Python, Playwright, but we won't
spend time introducing Python, Playwright concepts.
The tutorial also assumes you have Node 16+ with
npm and
git installed.
Step 1
Clone the example application and install dependencies:
Minimum required @percy/cli version is 1.28.8-beta.3 onwards for this to work correctly. If you already have @percy/cli installed please update it to latest or minium required version.
$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]# install the required packages
$ pip3 install -r requirements.txt
$ npm install
This tutorial specifically uses Browserstack Automate for Percy on Automate to run playwright test.
For Percy Web you can run the scripts directly after setting up PERCY_TOKEN.
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need Browserstack Automate setup for the same.
For automate you will need credentials so refer to following instructions to get the same.
  1. You will need a BrowserStack username and access key. To obtain your access credentials, sign up for a free trial or purchase a plan.
  2. Please get your username and access key from profile page.
Step 2
Sign in to Percy and create a new Automate project under Web category. You can name the project "test-project" if you'd like. After
you've created the project, you'll be shown a token environment variable.
Step 3
In the shell window you're working in, export the token and other environment variable:
PERCY_TOKEN is used by percy to identify the project and create the builds.
Note: In case of web projects, token will start with web_ keyword.
Note: In case of automate projects, token will start with auto_ keyword.
Unix
$ export PERCY_TOKEN="<your token here>"
Windows
$ set PERCY_TOKEN="<your token here>"# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"
Set the necessary BROWSERSTACK ENVIRONMENT variables, only required for Percy on Automate examples
Unix
$ export BROWSERSTACK_USERNAME="<your browserstack user_name>"
$ export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Windows
$ set BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"# PowerShell
$ $Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Alternatively you can also update USER_NAME, ACCESS_KEY with Browserstack User name, Access key in the script as well.
Step 4
Considering all the above steps are done, we will run our tests, which will create automate session as well as percy build.
For Percy Web
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.
$ npx percy exec -- python3 tests/web/test.py
Your First Percy Web build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
For Percy on Automate
$ npx percy exec -- python3 tests/automate/test.py
Your First Percy on Automate build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
Step 5
Go to Percy Dashboard and ensure that your base build is approved.
Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to file in test.py and make changes.
page.click('//*[@id="1"]/div[4]') # Say change id to 3
Or else just run after_test.py, we have already made visual changes in this script. If you run the after_test.py script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.
For Percy Web
$ npx percy exec -- python3 tests/web/after_test.py
For Percy on Automate
$ npx percy exec -- python3 tests/automate/after_test.py
On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.
Finished! 😀
From here, you can try making your own changes to the website and functional tests, if you like. If you do, re-run the tests and you'll see any visual changes reflected in Percy.
About
Example demonstrating Percy's Python Playwright integration.
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
example-percy-playwright-python
Example repo for demonstrating Percy Web/Percy on Automate integration with python using playwright.
Python Playwright Tutorial
The tutorial assumes you're already familiar with Python and
Playwright and focuses on using it with Percy. You'll still
be able to follow along if you're not familiar with Python, Playwright, but we won't
spend time introducing Python, Playwright concepts.
The tutorial also assumes you have Node 16+ with
npm and
git installed.
Step 1
Clone the example application and install dependencies:
Minimum required @percy/cli version is 1.28.8-beta.3 onwards for this to work correctly. If you already have @percy/cli installed please update it to latest or minium required version.
$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]# install the required packages
$ pip3 install -r requirements.txt
$ npm install
This tutorial specifically uses Browserstack Automate for Percy on Automate to run playwright test.
For Percy Web you can run the scripts directly after setting up PERCY_TOKEN.
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need Browserstack Automate setup for the same.
For automate you will need credentials so refer to following instructions to get the same.
  1. You will need a BrowserStack username and access key. To obtain your access credentials, sign up for a free trial or purchase a plan.
  2. Please get your username and access key from profile page.
Step 2
Sign in to Percy and create a new Automate project under Web category. You can name the project "test-project" if you'd like. After
you've created the project, you'll be shown a token environment variable.
Step 3
In the shell window you're working in, export the token and other environment variable:
PERCY_TOKEN is used by percy to identify the project and create the builds.
Note: In case of web projects, token will start with web_ keyword.
Note: In case of automate projects, token will start with auto_ keyword.
Unix
$ export PERCY_TOKEN="<your token here>"
Windows
$ set PERCY_TOKEN="<your token here>"# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"
Set the necessary BROWSERSTACK ENVIRONMENT variables, only required for Percy on Automate examples
Unix
$ export BROWSERSTACK_USERNAME="<your browserstack user_name>"
$ export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Windows
$ set BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"# PowerShell
$ $Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Alternatively you can also update USER_NAME, ACCESS_KEY with Browserstack User name, Access key in the script as well.
Step 4
Considering all the above steps are done, we will run our tests, which will create automate session as well as percy build.
For Percy Web
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.
$ npx percy exec -- python3 tests/web/test.py
Your First Percy Web build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
For Percy on Automate
$ npx percy exec -- python3 tests/automate/test.py
Your First Percy on Automate build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
Step 5
Go to Percy Dashboard and ensure that your base build is approved.
Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to file in test.py and make changes.
page.click('//*[@id="1"]/div[4]') # Say change id to 3
Or else just run after_test.py, we have already made visual changes in this script. If you run the after_test.py script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.
For Percy Web
$ npx percy exec -- python3 tests/web/after_test.py
For Percy on Automate
$ npx percy exec -- python3 tests/automate/after_test.py
On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.
Finished! 😀
From here, you can try making your own changes to the website and functional tests, if you like. If you do, re-run the tests and you'll see any visual changes reflected in Percy.
About
Example demonstrating Percy's Python Playwright integration.
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
example-percy-playwright-python
Example repo for demonstrating Percy Web/Percy on Automate integration with python using playwright.
Python Playwright Tutorial
The tutorial assumes you're already familiar with Python and
Playwright and focuses on using it with Percy. You'll still
be able to follow along if you're not familiar with Python, Playwright, but we won't
spend time introducing Python, Playwright concepts.
The tutorial also assumes you have Node 16+ with
npm and
git installed.
Step 1
Clone the example application and install dependencies:
Minimum required @percy/cli version is 1.28.8-beta.3 onwards for this to work correctly. If you already have @percy/cli installed please update it to latest or minium required version.
$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]# install the required packages
$ pip3 install -r requirements.txt
$ npm install
This tutorial specifically uses Browserstack Automate for Percy on Automate to run playwright test.
For Percy Web you can run the scripts directly after setting up PERCY_TOKEN.
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need Browserstack Automate setup for the same.
For automate you will need credentials so refer to following instructions to get the same.
  1. You will need a BrowserStack username and access key. To obtain your access credentials, sign up for a free trial or purchase a plan.
  2. Please get your username and access key from profile page.
Step 2
Sign in to Percy and create a new Automate project under Web category. You can name the project "test-project" if you'd like. After
you've created the project, you'll be shown a token environment variable.
Step 3
In the shell window you're working in, export the token and other environment variable:
PERCY_TOKEN is used by percy to identify the project and create the builds.
Note: In case of web projects, token will start with web_ keyword.
Note: In case of automate projects, token will start with auto_ keyword.
Unix
$ export PERCY_TOKEN="<your token here>"
Windows
$ set PERCY_TOKEN="<your token here>"# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"
Set the necessary BROWSERSTACK ENVIRONMENT variables, only required for Percy on Automate examples
Unix
$ export BROWSERSTACK_USERNAME="<your browserstack user_name>"
$ export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Windows
$ set BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"# PowerShell
$ $Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Alternatively you can also update USER_NAME, ACCESS_KEY with Browserstack User name, Access key in the script as well.
Step 4
Considering all the above steps are done, we will run our tests, which will create automate session as well as percy build.
For Percy Web
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.
$ npx percy exec -- python3 tests/web/test.py
Your First Percy Web build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
For Percy on Automate
$ npx percy exec -- python3 tests/automate/test.py
Your First Percy on Automate build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
Step 5
Go to Percy Dashboard and ensure that your base build is approved.
Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to file in test.py and make changes.
page.click('//*[@id="1"]/div[4]') # Say change id to 3
Or else just run after_test.py, we have already made visual changes in this script. If you run the after_test.py script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.
For Percy Web
$ npx percy exec -- python3 tests/web/after_test.py
For Percy on Automate
$ npx percy exec -- python3 tests/automate/after_test.py
On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.
Finished! 😀
From here, you can try making your own changes to the website and functional tests, if you like. If you do, re-run the tests and you'll see any visual changes reflected in Percy.
About
Example demonstrating Percy's Python Playwright integration.
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
example-percy-playwright-python
Example repo for demonstrating Percy Web/Percy on Automate integration with python using playwright.
Python Playwright Tutorial
The tutorial assumes you're already familiar with Python and
Playwright and focuses on using it with Percy. You'll still
be able to follow along if you're not familiar with Python, Playwright, but we won't
spend time introducing Python, Playwright concepts.
The tutorial also assumes you have Node 16+ with
npm and
git installed.
Step 1
Clone the example application and install dependencies:
Minimum required @percy/cli version is 1.28.8-beta.3 onwards for this to work correctly. If you already have @percy/cli installed please update it to latest or minium required version.
$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]# install the required packages
$ pip3 install -r requirements.txt
$ npm install
This tutorial specifically uses Browserstack Automate for Percy on Automate to run playwright test.
For Percy Web you can run the scripts directly after setting up PERCY_TOKEN.
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need Browserstack Automate setup for the same.
For automate you will need credentials so refer to following instructions to get the same.
  1. You will need a BrowserStack username and access key. To obtain your access credentials, sign up for a free trial or purchase a plan.
  2. Please get your username and access key from profile page.
Step 2
Sign in to Percy and create a new Automate project under Web category. You can name the project "test-project" if you'd like. After
you've created the project, you'll be shown a token environment variable.
Step 3
In the shell window you're working in, export the token and other environment variable:
PERCY_TOKEN is used by percy to identify the project and create the builds.
Note: In case of web projects, token will start with web_ keyword.
Note: In case of automate projects, token will start with auto_ keyword.
Unix
$ export PERCY_TOKEN="<your token here>"
Windows
$ set PERCY_TOKEN="<your token here>"# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"
Set the necessary BROWSERSTACK ENVIRONMENT variables, only required for Percy on Automate examples
Unix
$ export BROWSERSTACK_USERNAME="<your browserstack user_name>"
$ export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Windows
$ set BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"# PowerShell
$ $Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Alternatively you can also update USER_NAME, ACCESS_KEY with Browserstack User name, Access key in the script as well.
Step 4
Considering all the above steps are done, we will run our tests, which will create automate session as well as percy build.
For Percy Web
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.
$ npx percy exec -- python3 tests/web/test.py
Your First Percy Web build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
For Percy on Automate
$ npx percy exec -- python3 tests/automate/test.py
Your First Percy on Automate build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
Step 5
Go to Percy Dashboard and ensure that your base build is approved.
Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to file in test.py and make changes.
page.click('//*[@id="1"]/div[4]') # Say change id to 3
Or else just run after_test.py, we have already made visual changes in this script. If you run the after_test.py script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.
For Percy Web
$ npx percy exec -- python3 tests/web/after_test.py
For Percy on Automate
$ npx percy exec -- python3 tests/automate/after_test.py
On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.
Finished! 😀
From here, you can try making your own changes to the website and functional tests, if you like. If you do, re-run the tests and you'll see any visual changes reflected in Percy.
About
Example demonstrating Percy's Python Playwright integration.
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
example-percy-playwright-python
Example repo for demonstrating Percy Web/Percy on Automate integration with python using playwright.
Python Playwright Tutorial
The tutorial assumes you're already familiar with Python and
Playwright and focuses on using it with Percy. You'll still
be able to follow along if you're not familiar with Python, Playwright, but we won't
spend time introducing Python, Playwright concepts.
The tutorial also assumes you have Node 16+ with
npm and
git installed.
Step 1
Clone the example application and install dependencies:
Minimum required @percy/cli version is 1.28.8-beta.3 onwards for this to work correctly. If you already have @percy/cli installed please update it to latest or minium required version.
$ git clone https://github.com/percy/example-percy-playwright-python.git
$ cd example-percy-playwright-python
# create virtual environment
$ python3 -m venv env
$ source env/bin/activate
# update the pip if not updated already using [python3 -m pip install --upgrade pip]# install the required packages
$ pip3 install -r requirements.txt
$ npm install
This tutorial specifically uses Browserstack Automate for Percy on Automate to run playwright test.
For Percy Web you can run the scripts directly after setting up PERCY_TOKEN.
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need Browserstack Automate setup for the same.
For automate you will need credentials so refer to following instructions to get the same.
  1. You will need a BrowserStack username and access key. To obtain your access credentials, sign up for a free trial or purchase a plan.
  2. Please get your username and access key from profile page.
Step 2
Sign in to Percy and create a new Automate project under Web category. You can name the project "test-project" if you'd like. After
you've created the project, you'll be shown a token environment variable.
Step 3
In the shell window you're working in, export the token and other environment variable:
PERCY_TOKEN is used by percy to identify the project and create the builds.
Note: In case of web projects, token will start with web_ keyword.
Note: In case of automate projects, token will start with auto_ keyword.
Unix
$ export PERCY_TOKEN="<your token here>"
Windows
$ set PERCY_TOKEN="<your token here>"# PowerShell
$ $Env:PERCY_TOKEN="<your token here>"
Set the necessary BROWSERSTACK ENVIRONMENT variables, only required for Percy on Automate examples
Unix
$ export BROWSERSTACK_USERNAME="<your browserstack user_name>"
$ export BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Windows
$ set BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ set BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"# PowerShell
$ $Env:BROWSERSTACK_USERNAME="<your browserstack access_key>"
$ $Env:BROWSERSTACK_ACCESS_KEY="<your browserstack access_key>"
Alternatively you can also update USER_NAME, ACCESS_KEY with Browserstack User name, Access key in the script as well.
Step 4
Considering all the above steps are done, we will run our tests, which will create automate session as well as percy build.
For Percy Web
Note: In case of web we are using local browser feel free to update them as per you requirement. You don't need automate setup for the same.
$ npx percy exec -- python3 tests/web/test.py
Your First Percy Web build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
For Percy on Automate
$ npx percy exec -- python3 tests/automate/test.py
Your First Percy on Automate build is created.
On completion of the script, you would be able to see the your percy build. Since we ran for the first time, we would see these are new screenshots and hence there would be no comparisons.
Step 5
Go to Percy Dashboard and ensure that your base build is approved.
Now in order to make comparisons happen we need to make changes to the existing website so that a visual change can occur you can go to file in test.py and make changes.
page.click('//*[@id="1"]/div[4]') # Say change id to 3
Or else just run after_test.py, we have already made visual changes in this script. If you run the after_test.py script in tests, this would create few visual changes and would get compared to the last build and we would be able to see few diffs.
For Percy Web
$ npx percy exec -- python3 tests/web/after_test.py
For Percy on Automate
$ npx percy exec -- python3 tests/automate/after_test.py
On completion of this script, this build would get compared to the previous build and hence we can see the visual changes which percy detected.
Finished! 😀
From here, you can try making your own changes to the website and functional tests, if you like. If you do, re-run the tests and you'll see any visual changes reflected in Percy.
About
Example demonstrating Percy's Python Playwright integration.
Resources
Readme
License
Activity
Stars
0 stars
Watchers
0 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages