Visualize data-qa´s areas in screen when click extension icon.
data-qa Highlighter Extension
This extension helps QA and testing professionals who use data-qa / data-test / data-testid / data-cy attributes in HTML elements by making the content of these data attributes visible on screen. This is ideal for use with unit testing tools such as Jest or End-to-End testing tools Cypress or Selenium.
If you need to display these QA data elements on screen, click the “HIGHLIGHT data-qa” button and you are done. If you want to remove them, click the “REMOVE data-qa” button.
You can also manually search for any HTML attribute of all available elements on the screen.
The extension displays the number of data elements found in the DOM. When the extension does not find any elements, it displays a link to a demo page to test the functionality.
Source Manifest.json
How to download and manually install data-qa Highlighter extension for Chrome
Looking for a way to install data-qa Highlighter extensions for Chrome, you can search for them in the Chrome Web Store, clicking the "Add to Chrome" button, and following the straightforward process.
However, you may need to install data-qa Highlighter extensions manually, this article outlines two simple methods to effortlessly install data-qa Highlighter extensions, whether they come as unpacked folders in compressed formats like .zip or as .crx files.
Method 1: Download data-qa Highlighter extension and manually install through Drag &Drop
If you ever need to manually install a data-qa Highlighter extension for Chrome, don't worry, it's a simple process. Just follow these easy steps, and you will have your extension ready to use in no time.
Step 1: Download the data-qa Highlighter Extension by clicking the "Download CRX" button on the website.
Look for the data-qa Highlighter extension you wish to install. Go to the website and download the data-qa Highlighter extension package, which is usually a .CRX file and comes in a zipped file. Here ".crx" file is the format for data-qa Highlighter extension that contains all the data.
Step 2: Extract &Arrange Files
Once the file is downloaded, extract that file into its own folder. Similarly, give that extension files a permanent home. In other words, keep it in a folder that you don't accidentally delete it because these files will be needed to make that extension work.
Step 3: Go to the Chrome Extensions Page
Open Google Chrome and in the address bar, type chrome://extensions; it will open the Google Chrome extensions page. Make sure that "My extensions" is selected in the sidebar.
Step 4: Drag and Drop the Extension
Now, go to the folder where you extracted the data-qa Highlighter extension and drag &drop the extension file from there anywhere onto the extension page within Google Chrome.
Step 5: Complete the Installation
Once you drag and drop the extension file, follow the steps that Google Chrome takes you through. Similarly, if the extension file is of .crx file format, you will be required to review the permissions and then add the extension.
Now, you can manage that added extension as you would like to with any other Chrome extension that you added through Chrome Webstore. Its icon will also appear in the Google Chrome Menu on the right side of the address bar once you activate it.
Method 2: Download data-qa Highlighter extension for Chrome and install in Developer Mode
This is another method to install data-qa Highlighter extension manually, but the twist is that here, you install by enabling the developer mode option provided in Google Chrome. This mode is commonly used for testing extensions or running unpublished tools.
Step 1: Download the data-qa Highlighter extension file
Select and download the data-qa Highlighter extension by clicking the 'Download CRX' button on the website.
Step 2: Extract the downloaded contents
Convert the file to a ZIP file if it is in CRX format then extract the data-qa Highlighter extension zip file or folder that you downloaded. Make sure you extract it using the same folder name and keep it safely in another folder, so you don't delete it by mistake. The extracted folder will be needed to keep your data-qa Highlighter extension running.
Step 3: Open Chrome Extension Setting Page
In the address bar of Google Chrome, type chrome://extensions and open the Chrome Extension Page.
Step 4: Enable Developer Mode
After opening the Chrome Extension page, look at the top right side, and you will find the toggle option of "Developer mode."Simply enable that developer mode option.
Step 5: Load the Unpacked Extension
Once you enable the developer mode option, you will see the menu of Load Unpacked, Pack Extensions and Update. From that, select the option "Load unpacked."
Step 6: Select the Extension Folder
Once the pop-up opens upon clicking Load unpacked, select the data-qa Highlighter extension directory and click on the "Select Folder "button.
Step 7: Confirm and Install
After you select an extension folder of a Google Chrome extension you're installing manually, confirm its installation for the final time and let the installation complete.
Conclusion
Here we've made a step-by-step guide on How to manually install data-qa Highlighter extension in 2 ways. We hope this guide proves helpful.
Similar Extensions
Data CY Finder 452 1 ★ 29.24KiB
HLTV Matches 452 2 ★ 558KiB
Show Data Attributes 452 0 ★ 251KiB
Hull University Buddy 452 7 ★ 1.98MiB
Sauce Lens 452 1 ★ 434KiB
WorkStreamer Guide: Craft Screenshot Training Guides Incredibly Fast 452 2 ★ 105KiB
Lindle: Save, Manage Web Links 452 2 ★ 7.3MiB
Apiary - Web Highlighter & Annotator 452 0 ★ 1.51MiB
JobJette - Free AI Job Search Copilot 452 1 ★ 1.2MiB
Boss Hub | Signal YES 452 2 ★ 623KiB
GPT Privacy: Anonymize your Chat GPT prompts 452 1 ★ 805KiB
Anti FeR toolkit 452 3 ★ 85.54KiB
Parrot QA 452 2 ★ 137KiB
Vehichaul Importer 452 0 ★ 75.93KiB
NeoOffLine 452 2 ★ 4.11MiB
Time Tracker, Todo, Sprint Manager - Basecamp 452 9 ★ 1.69MiB
Poundsqueeze 452 5 ★ 294KiB
AgileMana JIRA assistant 452 2 ★ 85.43KiB
Fiverr Star Notification 452 2 ★ 130KiB
Ducking Extension - Ducking.id 452 13 ★ 1.88MiB
Xagio AI | Integrate ChatGPT & WordPress 452 10 ★ 167KiB
Bug Magnet 452 61 ★ 39.66KiB
A11y quick check 452 4 ★ 465KiB
JSON RPC Chrome Viewer 452 14 ★ 122KiB
User reviews
Vlad Gabov (ID: 000000cb67c88698) Voted 1 ★ - Updated 03/02/2020