QA Blog Posts
Page load time is an important part of QA testing. Browser Calories extension was created to help identify your site against the top sites on the internet. This is a great way to get a snapshot on what areas of your site you should focus on.
Description from the website
The web is getting fatter. If you take a look at the top 1 million sites, you will see that the median page weight is now bigger than SimCity 2000. Can you believe that?
Page weight is a super important metric and affects conversion, retention, and SEO. Actually, it not only costs user engagement â€" it costs money.
That's why Browser Calories exists. We will help you set a performance budget and measure if a page is exceeding these numbers or not.
Looks like even Google.com needs some tune up!
Cool Tool for your QA Toolbox
What's nice about Browser Calories is that you get a graphics that highlight the problem. This is useful to include in a Jira ticket so others can clearly see if the site needs to be tuned up.
This is also good as a benchmark to see if adding new library files will impact the overall performance of the site.
Getting Browser CaloriesBrowser Calories is available as an extension for Chrome, Firefox and Opera.
CodeCopy is an extension that makes it super easy to get code snippets from popular sites to your computer clipboard. As their slogan says, "Copy to clipboard buttons should exist on every code snippet.
CodeCopy puts an icon next to a code snippet, and when you click on the icon, it puts the code in your clipboard. No more fussing around making sure that you have all the code.
This helps QA and Engineering get the copy of the code. Useful for QA when you're looking for help when writing automation code.
Browser Badge Bookmarketlet
When taking browser screenshots, it's helpful to identify the browser that you're using. One way to highlight the browser is to put a browser banner in the browser before taking a screenshot.
Visit the QA Page to get all the banner image.
ChromeDrag and drop the "Chrome Banner" link to your bookmark bar to add a Chrome Banner overlay to any page your looking at.
FireFoxDrag and drop the "Firefox Banner" link to your bookmark bar to add a FireFox Banner overlay to any page your looking at.
Test Pilot in Firefox
Firefox likes to publicly test new features before deciding if they are worth fully integrating into the product. For QA, is a cool way to test upcoming features and see what's new. In addition, it's good to view the bug reports to get some fresh ideas on writing better bug reports.
Here are a few FireFox Experiments that might be useful for QA:
Notes in FireFox
One of the new features is Notes for FireFox, it's a way to jot down some notes on your FireFox account. You can access the notes by simply logging in. Using your Android smartphone device, you can jot some notes about testing and when you get to the office and log in you'll see the notes.
Unfortunately the Notes feature is not available for iOS. It works fine in Samsung Galaxy Tab E.
Check out the Bug Reports on github.
Side View allows you to view a mobile version of a site while browsing the web. This is useful when you want to watch a YouTube video and browse the web at the same time or apply something that you learn in the video.
Check out the Bug Reports on github.
Easy way to explain bug steps
Explainer is a Macintosh screenshot application that helps describing steps for a task. It's useful when trying to describe a bug or feature that doesn't work quite well.
In the free version, you only get 4 steps. For a one time fee of $7.99, you get 4 additional steps. The net results is a single professional looking image that can be mailed or added to any Jira issue.
Other features of the Pro version - the ability to save the documents - useful for repetitive tasks, change the watermark, lots more fonts for the description.
Four Things I Learned About Explainer
- You can use any screen capture application, or simply use Shift-Command-1 to use the built-in capture.
- The captured screenshots will be three times the size of what is shown in the step. This allows to reposition and resize screenshots.
- To type in the text simply hover the mouse over the bottom of each step, you'll see the overlay appear, click the text area and type away.
- You can Export the image to the Clipboard, Mail, Messages, Twitter, Facebook, Flickr, EverNote, and More. Don't see your option, add it in the Share Section of the System Extensions.
PostgreSQL Quick Cheat Sheet
If your use to supporting MySQL and now having to support PostgreSQL it can be tricky to know some of the common admin commands.
Here's a handy chart that I quickly put together of common admin commands that are used between the two databases:
|List databases||Show databases||l|
|Connect to database||use database;||c database|
|Show Database Tables||Show Tables||d|
|Show Tables Columns||Show Columns||d table|
If there are any other commands you want to add, let me know in the comments below.
July QA Graphics
Every once in a while I update the QA Graphic page with new content. This week I found a few images in my collection that I haven't posted yet.
I'll continue to look through my collection and upload images and add it to the collection.
If you have any graphics that you like to see, put it in the comment below or hit me up on Twitter.
Jira Short cuts for QA
Atlassian Jira is the most popular tool for teams to manage projects and track issues. Knowing shortcuts to navigate around the application can save you time with everyday tasks.
There are lots of great keyboard shortcuts, these are some of the ones that will improve your productivity .
Essential Keyboard Shortcuts
Here is a cheat sheet of essential shortcuts for Atlassian Jira that I believe are useful for any QA team.
This work any place in Jira:
|c||Create an Issue|
|m||Comment on the current issue|
|l||Edit issue label|
Quickly Navigate the Jira Board
I find using the One/Two combinations really handy when your looking at the Active Sprint and seeing what's in the backlog.
This is a useful bookmarklet to have:
data:text/html, <html contenteditable>
What this does is create a blank page where you can enter in text. It's a quick way to jot down some notes for test description or something.
Simply Drag and Drop this link to your bookmark bar to add this quick editor to your browser:
Now you'll have a simple text editor whenever you need to jot down a note or two.
Sometimes you need to test browser activity with slow connections. QA may need to test the user experience when it takes a long time for an image or JS file.
Chrome throttling is forcing the browser to slow down. This simulates a slow activity that users may experience via slow internet connections.
How to Enable Throttling
- Open the Developer Tools (Option-Command-I)
- Select the Network Tab
- Under the Audits Menu you should see Online with an Arrow to the right.
- There are two Presets, Fast 3G, Slow 3G, Offline
- You can create a Custom One by selecting Addx2026
Custom Throttling Options
Here are a couple of throttling settings to add.
- 56k - Modem Speed
- 128k - ISDN Speed
Handy Speed Chart
Here's a handy chart of various Internet Speeds:
A Few Words about Throttling Testing
Throttling testing is a good way to see what the page load looks like for some users. This is especially helpful when testing sites for mobile.
If you're running a Business to Business website, then running performance testing via throttling doesn't make sense since most users will be using fast internet.
Throttling testing is good for distance testing. (For example, if you have customers that are Japan, your website may not be performing as fast as people in New York City - because your servers are far away from their location.)
Panoramic Capture in Snagit
Sometimes it's not easy to capture an entire webpage by using some Full Page Screen Capture Tools. That's when using the Panoramic Capture tool in TechSmith Snagit can be useful.
How to Use the Capture Tool
When you use the Panoramic capture, you select the area that you want to capture, and then scroll to generate the panoramic image. After your done, click 'Stop' and Snagit will render the final image.
Panoramic Capture is available both in Photo and Video mode. In video mode, there is an icon to let you know that you can create a Panoramic view. In Photo mode, you need to define the capture selection ahead of time, alternatively, you could use the "All-in-One" option and have the same choice as video mode.
Video and "All in One" mode
Image mode as a Preset
This is a great tool to have available when QA has to capture the contents of an internal scrollable Div (or iFrame). Simply select the area that you want to capture and then scroll the iframe.
This is useful to help verify data in a table where the viewing area is too small.
Adding Alternative Search Engines to Chrome
Today's post is about adding additional search engines to Chrome and how to use them. Not going to cover Firefox in this post since the process is a bit different.
While 90% of your searches can be found via a simple Google query, sometimes it's better to use a different search engine. For example, there are instances where other sites that make sense than using a typical Google Search:
- Jira - Quickly search the company Jira database.
- StackOverflow - See if someone already asked and received an answer.
- Apple Support - Having issues with the MacBook or Apple Software? A great place to get answers
- Twitter - Search Twitter for the latest news. You jump right into Twitter with your search query.
- Facebook - Sometimes Facebook posts are fast on what's going on.
Fortunately you can easily configure Chrome to use other search engines.
Steps to add the Search to Chrome
In Chrome, Visit the Manage SearchEngine page. On the page you'll see all the installed Search Engines and other ones that Google might have added.
The Key thing on this page is the Keyword, you'll want to keep it as simple as possible. Google automatically adds a .com to some of the keywords, but that's additional keys you don't need. Keep the keyword simple, as I did in the above example.
To add a new one, click on ADD. Type in the name of the Search Engine, Keyword (Keep it simple) and URL. TechRepublic does a good job explaining the steps.
How to use the Enable the Alternative Search Engines
To use an alternative search engine in the Chrome bar, you type in the Keyword and then the Tab key. The search bar changes to let you know that your now searching using that engine:
Tip: This is why it's a good idea to keep the keyword simple and short. If you have a shorter keyword, you're likely to use the shortcut.
Now you can quickly search eBay, Twitter, StackOverflow and other sites and bypass the main page.
Running frequent tasks is one of the important parts of the Infrastructure team. The tasks vary from deleting files in the /tmp folder to running nightly reports.
The most popular tools for running scheduled tasks is cron.
It's important for QA to know the frequency of certain tasks and if that is the intended results. For example, should the task be running at 2 pm every other day, or is it at 2 pm every other week?
It's hard to remember the proper syntax to use. Fortunately, there is help.
Crontab.guru is an awesome site that helps you write and identify proper cron syntax. Simply put in a cron syntax and you'll get examples of how it would run.
This site also has a nice learning area. You can learn all the various crontab syntax options, the examples page has great example of different schedule options. (Such as setting up a cron schedule to run a cron job every even hour.)
Remember once you set the Cron job to test it! There some good tips over at End Point.
Website Cookies are small files that are used to for websites to store information on your browser. Website owners will tag a cookie to a browser for tracking purposes. Cookies are one way that a website knows that you visited it before and can auto log you in to make the experience better.
Occasionally the Quality Assurance team has to verify cookies have been set or to manipulate an existing cookie. This can be a bit tricky to do in Chrome Console panel.
I like how the cookie is separated by name, and if you want more information, simply click on the header to find more information. Making it easy to scroll through all the cookies.
EditThisCookie is open source. Check out the source code at GIT Hub
Blocked Cookies are ways to prevent a cookie from being created. You may do this to stop websites from tracking you online. (Hi Google!)
Protected Cookies is a feature to lock the value of a cookie. This will prevent a site from changing the value of a preset cookie. This is a good way for QA to test how cookies interact with the site.
Chrome Profiles vs Icognito Mode
As part of testing, Quality Assurance engineers usually switch to Incognito mode to verify functionality. For example, to see how a website behaves without the cookie setting.
If you don't want Google Chrome to remember your activity, you can browse the web privately in Chrome's Incognito mode.
Instead of switching to Incognito mode, have you considered setting up a separate profile for testing? For example, you can set up a profile for Dev, Staging, and Production:
Instead of launching Incognito mode to test production, you might be better off creating a Chrome Profile.
Each Chrome Profile is an isolated environment. Think of each Person as a separate Chrome application - each with its own Extensions, Bookmarks and Cookies.
This means you can enable extensions and other settings for that particular environment.
In addition, you get a unique Bookmark bar specific to that Profile. Now you can have special bookmarks that you would use for Staging and Production.
When you go Incognito mode you only get the bookmarks for the current profile. In most cases, all the extensions are disabled. Profiles are a bit more powerful.
Unfortunately there is no keyboard shortcut to switch between profiles. You will have to use the profile switcher. However, There is a way to create a new Dock Launcher to fire up a different profile.
Creating a Profile
It's very easy to create a new profile. Simply select the People menu, and then 'Add Person' or select your name on the top right of the current browser window and select "Manage People" then click on "Add Person"
There is no limit on the number of people you can have, and you can always remove the profile.
Tip: Set up a temporary profile for that big project that your working on.
Imagine having bookmarks to the Current Product Specs, Jira Parent Ticket and the QA Wiki Reference page in the Bookmark Bar. Once the project is done, delete the profile.
A Google profile is a good way to manage a large project.
MacOS: Create a Profile Specific Dock Launcher
To launch Chrome with a specific profile, you pass through the profile-directory parameter. The profile number is based on the order it was created on the computer.
- open -a "Google Chrome" --args --profile-directory="Profile 4"
- open -a "Google Chrome" --args --profile-directory="Profile 1"
If you want to create an Application Shortcut, use the Automator Tool. Simple copy/paste the command into the "Run Shell" command window:
- Launch the Automator application
- Create a new Document
- Select Application as the Type of Document
- In the Search command, to the right of Variables, type in Shell
- Select the 'Run Shell Script'
- Paste in open -a "Google Chrome" --args --profile-directory="Profile 2" (Change the profile to the one you want.)
- Test the command by typing Command R
- Save the Application to someplace, and then drag/drop it in the Dock.
Learn More about Google Profile
Read all about Google Person functionality on the "Share Chrome with Others" page.