When writing test code with Selenium or Playwright, have you ever struggled with “Which selector should I use?” or “Why can’t I find this element?” Mastering your browser’s Developer Tools (DevTools) can solve most of those problems. This guide covers the DevTools fundamentals every QA engineer needs for test automation — with practical examples throughout.
📌 Who This Article Is For
| ✅ Beginners with Selenium or Playwright who are unsure how to locate elements |
| ✅ Engineers who have opened DevTools before but aren’t sure what to look at |
| ✅ QA engineers who want to build solid foundational skills before writing test code |
| ✅ Anyone who wants to speed up bug investigation during manual testing |
✅ What You’ll Learn
|
👨💻 About the Author This article is written by a QA engineer with over 15 years of hands-on experience in test automation using Selenium and Playwright. The content is grounded in real situations — including the all-too-familiar experience of opening DevTools and having no idea where to start. |
📌 Key Takeaways
|
“Element not found.” “I have no idea which selector to use.” These are the walls every beginner hits when starting out with test automation. The good news: most of the answers are already inside your browser’s Developer Tools (DevTools).
DevTools is a built-in development and debugging panel available in Chrome, Edge, Firefox, and other modern browsers — no installation required. For QA engineers, it’s an indispensable companion for preparing and verifying test code before you write a single line.
- What Is Chrome DevTools?
- ① Elements Tab: Inspect Elements and Grab Selectors
- ② Console Tab: Validate Selectors in Real Time
- ③ Network Tab: Inspect API Communication
- ④ Application Tab: Inspect Cookies and Storage
- Common Pitfalls When Using DevTools
- DevTools Tab Quick Reference by Task
- Frequently Asked Questions
- Summary
What Is Chrome DevTools?
DevTools is a built-in panel in your browser for development and debugging. It lets you inspect a page’s HTML structure, CSS, JavaScript behavior, and network communication — all in real time.
How to Open DevTools
| OS / Browser | Shortcut | Alternative |
|---|---|---|
| Windows / Chrome · Edge | F12 or Ctrl + Shift + I | Right-click → “Inspect” |
| Mac / Chrome · Safari | Cmd + Option + I | Right-click → “Inspect Element” |
| Firefox | F12 or Ctrl + Shift + I | Right-click → “Inspect” |
In QA practice, Chrome DevTools is the most widely used. Since Selenium and Playwright both default to Chromium-based browsers, what you see in Chrome DevTools maps directly to your test code.
① Elements Tab: Inspect Elements and Grab Selectors
This is the tab QA engineers use most. It shows the page’s HTML structure and lets you copy selectors for use in your test code — right on the spot.
Finding an Element Quickly
Right-click on the element you want to test (a button, input field, etc.) and select “Inspect.” The element will be highlighted in the HTML tree.
| Right-click the target element | → | Select “Inspect” | → | Element highlighted in the Elements tab |
Copying Selectors
Right-clicking an HTML element in the Elements tab gives you a one-click way to copy its selector.
| Copy Method | What You Get | Recommendation |
|---|---|---|
| Copy → Copy selector | CSS selector | ⭐⭐⭐ Start here |
| Copy → Copy XPath | XPath (relative) | ⭐⭐ When CSS isn’t enough |
| Copy → Copy full XPath | XPath (absolute) | ⭐ Last resort — breaks easily |
⚠️ Avoid Copy Full XPath Absolute XPath like |
Checking id and data-testid Attributes
The Elements tab shows all attributes on an element — id, name, data-testid, and more — at a glance.
<input id="email"
name="email"
data-testid="login-email"
type="email"
placeholder="Email address">With that information, you can write the following in Selenium or Playwright:
# Selenium
driver.find_element(By.ID, "email")
driver.find_element(By.CSS_SELECTOR, "[data-testid='login-email']")
# Playwright
page.get_by_test_id("login-email")
page.locator("#email")② Console Tab: Validate Selectors in Real Time
The Console tab lets you run JavaScript directly in the browser. Use it to verify whether a selector actually matches an element — before writing a single line of test code.
Selector Verification Quick Reference
# Get the first matching element by CSS selector
document.querySelector('.submit-btn')
# Get all matching elements (full syntax)
document.querySelectorAll('.list-item')
# Shortcuts available in the Chrome DevTools Console only
$$('.list-item') # Shorthand for document.querySelectorAll
$x('//button[@type="submit"]') # XPath query
# Check an attribute value
document.querySelector('#email').getAttribute('data-testid') If $$('.list-item') returns an empty array [], the selector isn’t matching anything — refine it and try again.
💡 How to Read Console Results
|
③ Network Tab: Inspect API Communication
The Network tab shows all HTTP requests the page makes in real time. It’s essential for understanding what’s happening between the frontend and the API — and for building your test cases around actual data.
Network Tab Information Useful for Test Design
| What You Can See | How It Helps with Testing |
|---|---|
| Request URL and method | Identify the exact API endpoint to target in your API tests |
| Request body | Confirm parameter names and data format being sent |
| Response body | Check the expected JSON for success and error responses |
| Status code | Turn 200/400/401/500 patterns into concrete test cases |
| Response time | Investigate slow page rendering and confirm response performance |
Network Tab Filters
The Network tab captures all traffic, which can feel overwhelming at first. Use these filters to narrow things down quickly.
| Filter | Use Case |
|---|---|
| Fetch/XHR | Show only API calls. The most commonly used filter |
| Doc | Show only HTML document requests |
| Img / Media | Image and media file requests |
| Search box | Filter by URL keyword (e.g., api/login) |
④ Application Tab: Inspect Cookies and Storage
The Application tab is useful for testing login state, session management, and other storage-based behavior. You can view and delete Cookie and LocalStorage values in real time.
| Feature | Testing Use Case |
|---|---|
| Cookies | Check session token presence and expiry. Delete to simulate logged-out state |
| LocalStorage | Inspect frontend-stored settings and user data |
| SessionStorage | Check temporary data that resets when the tab closes |
Common Pitfalls When Using DevTools
🚧 Watch Out for These ① No network log in the Network tab after opening DevTools The Network tab only records traffic while it’s open. Open DevTools before reloading the page, or re-trigger the action you want to capture. ② The CSS selector copied from DevTools doesn’t work in Selenium Chrome-generated CSS selectors often look like ③ Dynamically rendered elements may appear some time after the initial page load. Use Selenium’s WebDriverWait or Playwright’s built-in auto-waiting to wait for the element to appear. ④ Can’t interact with elements inside an iframe Content inside an iframe is treated as a separate document, so it can’t be accessed the same way as regular page elements. In Selenium, use ⑤ Confused by XHR and Fetch appearing as separate entries In Chrome, the “Fetch/XHR” filter shows both together in one view. If they appear separately, click each to inspect them individually. |
DevTools Tab Quick Reference by Task
| What You Want to Do | Tab to Use | How |
|---|---|---|
| Check an element’s id or class | Elements | Right-click → “Inspect” |
| Copy a CSS selector | Elements | Right-click element → Copy → Copy selector |
| Verify a selector works | Console | Run $$('selector') |
| Inspect an API request or response | Network | Filter by Fetch/XHR |
| Check login cookies | Application | Cookies → select the domain |
| Investigate what caused an error | Console + Network | Red error messages + failed requests |
Frequently Asked Questions
Google Chrome is the top recommendation for test automation purposes. Selenium and Playwright both default to Chromium-based browsers, so what you verify in Chrome DevTools applies directly to your test code.
Both, in sequence. First use the Elements tab to identify id, data-testid, or other attributes. Then validate the selector using $$('...') in the Console tab. This two-step approach is fast and reliable.
$, $$, and $x in the Console? $ is shorthand for document.querySelector (first match only), $$ is shorthand for document.querySelectorAll (all matches), and $x queries by XPath. These are shortcuts available in the Chrome DevTools Console and cannot be used in your JavaScript code or in Selenium/Playwright test code. Note that $x in particular is a Chrome DevTools-specific feature and may change in future versions.
CORS errors are browser security restrictions and usually do not directly affect Selenium or Playwright test runs. However, if your API tests make cross-origin requests, check that your test environment’s CORS settings are configured correctly.
They serve different purposes. Playwright Codegen (playwright codegen) records browser actions and generates test code automatically — great for reducing boilerplate. DevTools is your go-to for bug investigation during manual testing, pre-verifying selectors, and inspecting API responses. Using both together gives you the best results.
Yes. Selectors based on randomly generated ids or dynamically assigned class names (e.g., CSS Modules generating Button_btn__abc123) can vary by environment or build. The best practice is to ask developers to add dedicated data-testid attributes that remain consistent across environments.
They are essentially the same. Since Edge is also Chromium-based, all major features — Elements, Console, Network, and more — work identically. Either browser works fine for Selenium and Playwright verification purposes.
Summary
|
DevTools requires no installation — it’s waiting in your browser right now. Building the habit of “check DevTools first before writing test code” is one of the simplest and highest-impact things you can do to improve both the quality of your tests and the speed of your debugging.
💡 A Note for Playwright Users: Use Semantic Locators for More Stable Tests Beyond
|
