Find My Locator

Locators in one click, Playwright, Cypress and Selenium test recording, link and request checks, test data and screenshots.

“FindMyLocator” is a powerful and user-friendly browser extension designed to simplify locating unique elements within a Document Object Model (DOM) structure of your Web Pages. It shows the locators on the page or in Chrome’s side panel, Playwright’s own locators among them, tests any locator you paste, turns the elements you pick into a Page Object class, has QAEverest write test cases from a page, a story or a recording, records what you do on a page and turns it into a ready-to-run Playwright, Cypress or Selenium test, checks a page’s links, load time, headers and requests, fills forms with test data, takes screenshots with the page’s details, records the tab as a video for bug reports, and checks a page’s spelling and grammar. FindMyLocator is a product conceived and meticulously crafted by R&D department of DevQAExpert Solution Pvt. Ltd. Whether you’re a developer, a tester, or someone who frequently interacts with web content, “FindMyLocator” is here to enhance your productivity and streamline your workflow. “FindMyLocator” generates unique selectors just in a single click. When an element has nothing unique of its own, it builds the XPath from a nearby element that does, such as its parent, a child or the element next to it. New in 1.14: record the tab as a video In the Report tab, Video records the tab you are on, as WebM (the default) or MP4, with or without its sound, for up to 5 minutes, also as it goes to other pages. A red ring shows where each click lands, and the toolbar icon shows the time. When you stop, the video opens next to the page with the page’s details: play it, add who tested it and a note, then copy the details or download the video. It stays on your computer. The Network and Test data tabs The Network tab checks how a page behaves: • Links: checks every link on the page, in iframes and shadow DOM too, and marks each one: green works, blue redirects, orange needs a look (a sign-in wall, or a site that turns automated checks away), red is broken or not answering. Click a result to jump to its link, leave out sites you don’t want checked, and download the results as CSV. Links are checked without your cookies, so a “Sign out” link does not sign you out. Chrome Web Store links show “?”: Chrome does not let extensions look at Web Store pages. • Load time: how long the page took to load, with first byte, DOM ready, first paint and largest paint, in ten phases from the DNS lookup to the load event. “Reload and time” reloads the page and shows the new time next to the last one. Switch on “Show the load time on the icon” to see every page’s time in seconds on the toolbar icon, in red above a limit you set. The pages you time are kept, the last 100 of them: download them as CSV for this site or for all sites, with how each page was opened. • Headers: set or remove request or response headers on the sites you choose, with a switch for each header and one for all of them. • Requests: log a tab’s page loads, form posts and fetch/XHR calls. Open one, change its method, address, headers or body and send it again, with or without the site’s cookies; see the response, or copy it as a cURL command. The Test data tab fills forms and makes data for you: • Fill form: fills the fields on the page, in iframes and shadow DOM too, with valid values, the longest or highest a field allows, the shortest or lowest, or invalid ones: an email without “@”, one character too many, one step over the maximum, an empty required field, a confirm password that does not match. It reads each field’s type, label, limits and pattern, works with React and other frameworks, and lists what each field got. Government ID, file, hidden, disabled and read-only fields are left alone. • Generate: up to 1,000 rows of made-up names, emails, phone numbers, addresses, PIN, ZIP or postcodes, companies, dates, UUIDs, IP addresses and test card numbers, in Indian, US or UK formats. Copy or download them as CSV or JSON. • Clear site: clears the cookies, local and session storage, IndexedDB, Cache Storage, service workers and browser cache of the current site only, and reloads the page. The data is safe to type into the system you test: emails are at example.com, which never receives mail; card numbers are the published test numbers; IP addresses come from the ranges kept for documentation; US and UK phone numbers come from the ranges kept for fiction. Government IDs are never made up. Record a test, export it as code Open the Recording tab, press Record and use your web app as your test should: click, type, choose options, tick boxes, upload files, press Enter or Escape, and carry on in new tabs, iframes and shadow DOM. To add a check, tick “Add checks” and click an element that should be visible. Press Stop, then export the recording: • Playwright: TypeScript, JavaScript, Python, Java, C# • Cypress: JavaScript, TypeScript • Selenium: Java, Python, C#, JavaScript • JSON: the Chrome DevTools Recorder format, for QAEverest or Chrome’s own Recorder panel Choose the format and language from the dropdowns, then Download the test file or Copy the code. Each step becomes the framework’s own command, with a comment that says the step in plain English. The test finds elements with Playwright’s own locators where it can, else FindMyLocator’s unique CSS and XPath, and waits for them the way each framework expects. Your passwords are never stored: a password field reads its value from an environment variable. “Open in QAEverest” sends the recording straight to QAEverest, which turns it into plain-English test cases. Key Features of FindMYLocator: Precise Element Identification: “FindMyLocator” empowers users to accurately pinpoint and identify specific elements within a webpage’s DOM structure. With a clicking event, you can visually select an element, and “FindMyLocator” will generate a unique and robust locator strategy to access that element programmatically. Multiple Locator Strategies: The extension supports a variety of popular locator strategies, such as CSS selectors, XPath, and more. This ensures that no matter your preferred method of interacting with the DOM, “FindMyLocator” has you covered. Playwright Locators: Playwright’s own getByRole, getByLabel, getByPlaceholder and getByTestId, offered only when they find that element alone (a button repeated in every card is found inside its card). They keep working when ids, classes and layout change. In JavaScript/TypeScript, Python, Java or C#, with a warning on CSS or XPath that rests on a generated id. A count in a badge on a button or link, such as Cart 3, is left out, so the locator keeps working when the count changes. Locator Tester: paste CSS, XPath, a Playwright locator, Selenium’s By or Cypress’s cy.get and see how many elements it finds, each outlined on the page. Page Object Export: add the elements you pick, on any page, to one page object class for Playwright, Selenium or Cypress, in the language your team uses, to copy or download. Shadow DOM: click an element inside a web component and get locators for that element itself, with its path into the shadow DOM. Test Cases: QAEverest writes test cases from the page, a story or your recording; you see the text before it is sent. Visual Selection: “FindMyLocator” offers an intuitive interface that lets users visually highlight the element they want to locate. The extension then generates the corresponding locator code, eliminating the need to manually inspect and create locators from scratch. Locators in the Side Panel: in the Locator tab, choose “In the side panel” under “Show locators” and the locators stay beside the page while you click, each with a Copy button. It works for clicks, right-click > Find My Locator and iframes, follows the tab you are on, and keeps the last element you picked. Needs Chrome 116 or later. Test Recording and Export: Record a flow once and download it as a Playwright, Cypress or Selenium test in the language your team uses, or as JSON for QAEverest and Chrome’s Recorder. Network Checks: Find broken links, see where a page’s load time goes, change request and response headers, and log, edit and resend the requests a page makes. Test Data: Fill a form with valid, boundary or invalid values in one click, generate rows of realistic test data, and clear a site’s data before the next run. Screenshots for Bug Reports: capture the visible area, the full page (scrolled and stitched), an area you select or one element. In the editor, add arrows, boxes, text or blur, an address bar on top and a strip of the page’s details below, then download it as an image or PDF, or copy it into a bug report. Video for Bug Reports: record the tab with a ring at each click, then play it next to the page’s details and download it as WebM or MP4. Needs Chrome 116 or later. Text Check: checks the text a page shows its users, in iframes and shadow DOM too, for spelling, grammar and punctuation. Mistakes are underlined on the page without changing it and listed with a suggestion and the reason, to download as CSV. QAEverest checks it with your API key and uses credits; where Chrome has its own proofreader, it can check on your computer instead. It supports - xpath and CssSelector unique locator - XPath from a nearby unique element - iframe and nested iframe - Cross origin iframe - svg elements - Dynamic elements, - shadow DOM and nested shadow DOM (open shadow roots) - dynamic dropdown - submenu and dynamic invisible elements too. - Showing locators on the page or in Chrome’s side panel - Playwright locators that find an element by its role, label, placeholder or test id - Testing a locator: CSS, XPath or Playwright, with a match count and outlines - Page Object classes for Playwright, Selenium and Cypress - Test cases written by QAEverest from a page, a story or a recording - Recording tests and exporting them as Playwright, Cypress, Selenium or JSON - Checking a page’s links, load time, headers and requests - Filling forms with valid, boundary or invalid test data, and generating test data - Screenshots of the visible area, the full page, an area or an element, with marks and details - Recording the tab as a video, with a ring at each click - Checking a page’s spelling and grammar How to Use: · Install the “FindMyLocator” extension from the web store. · Navigate to a webpage you want to work with. · Click on the “FindMyLocator” icon in your browser toolbar to activate the extension. · Click the element you want to locate. · Choose your preferred locator strategy (CSS selector, XPath, etc.). · Copy the generated code and paste it into your development or testing environment. How to Get a Playwright Locator: · Click the element: the window on the page shows the best Playwright locator under the suggested variable name. · The Locator tab lists all of them; choose JS / TS, Python, Java or C# there. How to Test a Locator: · In the Locator tab, paste a locator into Test a locator, or press Test next to one the tab shows. · Press Test: the count appears and the matches are outlined. Prev and Next step through them; Esc clears. How to Build a Page Object: · Click an element, then press Add to Page Object in the Locator tab; repeat for each element. · Under Page Object, choose the framework and language, then press Copy or Download. How to Get Test Cases: · Click the “FindMyLocator” icon, open the Test cases tab, paste your QAEverest API key once and press Connect. · Choose This page or The recording and check the text in the box, or choose A story and write it. · Press Generate test cases, then copy or download them. How to Record a Test: · Open the page your test should start on and click the “FindMyLocator” icon. · Open the Recording tab and press Record. · Use the page the way your test should. To add a check, tick “Add checks” and click an element. · Press Stop. · Under Export, choose the framework and language (or JSON), then press Download or Copy. Or press “Open in QAEverest”. How to Check a Page: · Open the page and click the “FindMyLocator” icon. · Open the Network tab. · Links: press Check links. Load time: open Load time. Headers: press “+ Add a header”. Requests: press Log this tab, then use the page. How to Fill a Form: · Open the page with the form and click the “FindMyLocator” icon. · Open the Test data tab, choose valid, longest, shortest or invalid values, and press Fill the form. · Before the next run, open Clear site and press Clear site data to start the site from scratch. How to Take a Screenshot: · Click the “FindMyLocator” icon and open the Report tab. · Under Screenshot, choose Visible area, Full page, Select an area or An element. · In the editor, add an Arrow, a Box, Text or Blur, and turn the Address bar and Details on or off. · Choose PNG, JPEG, WebP or PDF and press Download, or press Copy image. How to Record a Video: · On the page, click the “FindMyLocator” icon, open the Report tab and then Video. · Choose WebM or MP4 and whether to record the tab’s sound, then press Record this tab. · Use the page; the icon shows the time. Open the popup again and press Stop. · The video opens in a new tab: play it, then press Copy details or Download. How to Check a Page’s Text: · Click the “FindMyLocator” icon, open the Report tab and then Check text. · Paste your QAEverest API key (Get your API key opens QAEverest) once; it stays in your browser. · Press “Check spelling and grammar”. Mistakes are underlined on the page and listed in the popup. Privacy: request logs, test data, screenshots and videos stay in your browser. FindMyLocator sends nothing about the pages you test to us, with three exceptions you start yourself: a recording goes to QAEverest when you press “Open in QAEverest”; a page’s visible text and its site name go to QAEverest, with your API key, when you press “Check spelling and grammar”; and the text shown in the Test cases box (from the page, your story or your recording), with the feature name, type and format shown under it, goes to QAEverest, with your API key, when you press “Generate test cases”. Your API key goes only to QAEverest. When Chrome checks the text on your computer, nothing is sent. Development Team: “Challenges Drive Innovation” In our testing domain, we encounter the constant need to identify unique locators and adapt to changes when locators evolve. This has led our Tester’s community to develop a groundbreaking solution that outperforms existing market products, ensuring precise locator identification even in the face of change. Facts of Our FindMyLocator Extension Tool: - Seamlessly obtain distinctive locators, on the page or in the side panel - Playwright locators that keep working when ids, classes and layout change - Test any locator and see what it finds - Locators inside shadow DOM - Build a Page Object from the elements you pick - Get test cases for a page, a story or a recording - Record a test once, export it to Playwright, Cypress or Selenium - Check links, load time, headers and requests - Fill forms with valid, boundary or invalid test data - Take screenshots with the page’s details for bug reports - Record the tab as a video for bug reports - Check a page’s spelling and grammar - Developed by a dedicated community of testers - Rigorously tested by seasoned professionals - Versatile multi-locator capabilities - Significant time savings achieved - Free Available - Chrome Browser compatible Enhance your web development and testing efficiency with “FindMyLocator”. Say goodbye to manual locator creation and debugging, and say hello to a smoother, more productive workflow. Video: https://youtu.be/YDVNaTw0-b4 Web page: https://devqaexpert.com/findmylocator/