Skip to main content

Posts

Showing posts with the label devTools

Accessibility testing: Chrome DevTools

Though there are specifically designed tools like NVDA, Jaws, etc. for accessibility testing but if you would like to perform a quick Accessibility test on your website for below mentioned P1 checks, please go through this link : https://developers.google.com/web/tools/chrome-devtools/accessibility/reference - The user is able to navigate through the page with a keyboard or/and screen reader? - Are the page(s) elements properly marked up for screen readers?

Use of Copy styles from Dev Tools (Extract all CSS values of any element)

At times, we need to test many CSS values of an element on the page and look for a quick option to copy every attribute at once. Going to Styles tab in Dev Tools and copying 1 by 1 is a tedious thing. You can follow below-mentioned steps to extract all the CSS for any selected element using Chrome Dev Tool in one shot: 1. Right-click on a DOM node in the Elements Panel 2. Select Copy > Copy styles Sample for the image given below : font-style: inherit; font-family: "Open Sans",Helvetica,Arial,sans-serif; font-size: 18px; font-weight: 400; color: #333; display: inline-block; max-width: 170px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; text-decoration: none; height: 24px; line-height: 24px;

Screenshot using Chrome DevTools

1. Open a Chrome browser. 2. Open Dev Tools (Press F12). 3. Press CTRL+SHIFT+P (in windows) or cmd+SHIFT+P (in mac). 4. Type "screenshot" into the Command Menu and you will see options like "Capture area screenshot", "Capture full-size screenshot", Capture node screenshot" and "Capture screenshot". 5. Select your desired option and hit enter. Done... If you wish to, you can also emulate a device mode first and then take the screenshot- this way it will capture as per the device dimensions. Isn't it really handy when you want to take the screenshot of the entire page on any device like iPhone X?

Selenium 4: Chrome DevTools API

In Selenium 4, there is an Interface for Chrome DevTools API that lets you play with DevTools. Here is a list of few things that we can achieve by using DevTools API with Selenium: 1. Use Console capabilities 2. Emulate network conditions 3. Perform security operations 4. Get performance and Metrics of our Browser/Network The complete API can be found here: https://lnkd.in/f7ffwZq Showing below how we can listen to Chrome Console logs and close the browser using the "Devtools" interface. public static void chromeDevTools() throws InterruptedException, IOException { try { chromeDevTools = driver.getDevTools(); chromeDevTools.createSession(); message = "Hi everyone, this is Dheeraj."; driver.get(" https://lnkd.in/fM5JmnZ "); // execute Script to write console message driver.executeScript("console.log('" + message + "');"); } catch (Exception e) { e.printStackTrace(); } finally { // C