QA Blog Posts

QA Image Library

Check out the growing QA Image Library. This is my personal colleciton of Slack Images for that perfect QA Moment.

August 6, 2018

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.

I created a bunch of sport banner-like images of all the popular browsers. Using some JavaScript and Bookmarklets it's easy to do.

2018 Browser Banner

Visit the QA Page to get all the banner image.

Chrome

Drag and drop the "Chrome Banner" link to your bookmark bar to add a Chrome Banner overlay to any page your looking at.

javascript:(function(){document.body.innerHTML += '<img src="[http://www.cryan.com/qa/banners/ChromeBanner.png](http://www.cryan.com/qa/banners/ChromeBanner.png)" style="position: fixed; left: 10px; bottom: 10px; z-index: 1000">';})();

FireFox

Drag and drop the "Firefox Banner" link to your bookmark bar to add a FireFox Banner overlay to any page your looking at.

javascript:(function(){document.body.innerHTML += '<img src="[http://www.cryan.com/qa/banners/FirefoxBanner.png](http://www.cryan.com/qa/banners/FirefoxBanner.png)" style="position: fixed; left: 10px; bottom: 10px; z-index: 1000">';})();

July 30, 2018

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.

Fire Fox Test Pilot Pages

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

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.

July 23, 2018

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.

Mac Explainer Example

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.
July 16, 2018

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:

MySQL Postgres

Action MySQLPostgreSQL
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 9, 2018

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.

QATestingSign SoftwareSign

CodeFreezeWarning
http://www.cryan.com/qa/graphics/CodeFreezeWarning.jpg

GreatPowers
http://www.cryan.com/qa/graphics/GreatPowers.jpg

If you have any graphics that you like to see, put it in the comment below or hit me up on Twitter.

July 2, 2018

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 .

Jira Q A Short Cut

Essential Keyboard Shortcuts

Here is a cheat sheet of essential shortcuts for Atlassian Jira that I believe are useful for any QA team.

Global Shortcuts

This work any place in Jira:

/Quick Search
cCreate an Issue
[Toggle Sidebar

Viewing Issues

eEdit issue
aAssign issue
mComment on the current issue
lEdit issue label

Quickly Navigate the Jira Board

1Backlog
2Active Sprint
3Reports

I find using the One/Two combinations really handy when your looking at the Active Sprint and seeing what's in the backlog.

June 25, 2018

Quick Editor

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.

Bookmarklet Example

Bookmarketlets are tiny javascript programs that are used as tools to enhance your web browsing experience.

Quick Edit Bookmark

Simply Drag and Drop this link to your bookmark bar to add this quick editor to your browser:

Quick Edit

Now you'll have a simple text editor whenever you need to jot down a note or two.

June 18, 2018

Chrome Throttling

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

Chrome Online

  • 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:

speedtime

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.

I have found throttling testing a good way to test race conditions. If certain JavaScript files don't load at a certain time, it could cause some unexpected behavior or views.

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.)

June 11, 2018

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.

Capture Screen
Video and "All in One" mode

Image Mode Option
Image mode as a Preset

QA Advantage

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.

June 4, 2018

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.

Manage Search Settings

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:

search Twitter

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.