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.

March 4, 2019

Fun with Animated Gifs

Having some fun with GIFs.

Dont Do that
http://www.cryan.com/daily/2019/dontdothat.gif
When Developers create bugs in Production.

Meetings Chat
http://www.cryan.com/dialy/MeetingsChat.gif
When product tries to describe a feature to QA.

You can find more animated GIFs at giphy.com

February 25, 2019

Blue Button

Blue Button Chrome extension, by the Voice Group, is a handy way to get some quick information about the site you are currently looking at.

Description from the Developer

Hit the Blue Button on any web page, and get an instant, no-frills index of its building blocks. Easily access information on SEO, code and graphics components: from title tags and meta description to scripts and stylesheets to images and fonts.

Blue Button Screen Shot

Why QA should use this

  • Find Internal and External Stylesheets.

    If something doesn't look right in Production but worked fine Dev, it could be the location of a particular stylesheet or javascript file. Blue Button list all the external and internal file references. (Perhaps and Internal Script didn't get merged during the last deployment.)

  • Easily Identify Scripts

    Are you referencing the same JavaScript file multiple times? Could that be causing load issues? Easily identify what scripts are being called.

  • Alt Attributes Requirements

    Did you know that the image alt tag is required anytime an image is referenced? Blue Button makes sure all the images have the proper Alt tag. QA should note images that don't have the proper Alt tags - which will help SEO.

Getting the Chrome Extension

Download the Chrome Extension from the Chrome Web Store.. You can find more information from the Voice Group.

February 18, 2019

World Quality Report

Have you heard about the World Quality Report document put out by Capgemini? This is a useful document to get a snapshot on testing being done around the world.

This is a free report - you do have to fill in some contact information to get the report. I suspect that this is used to contact you to help gather data for next year's report.

Description from Capgemini

The World Quality Report, which this year interviewed over 1700 respondents from 32 countries, is the only global report analyzing application quality and testing trends. It has been produced annually since 2009.

Now in its 10th edition, the 2018-19 report adopted data collection through computer-aided telephone interviews. Based on analysis of six respondent groups: CIO, VP Application, IT Director, QA/Testing Manager, CDO/CMO, and CTO/Product Head, the report surveyed respondents from across the globe through quantitative interviews followed by qualitative deep-dive discussions.

World Quality Report

Five Things I Learned

I am not going to go through all the data in the report. The report encompasses 72 pages, and there's lots of useful information for any type of QA Testing.

  • The document is a combination of 1,700 IT Executives who took part in the research study. The Financial Service sector had the highest turnout (19%), followed by the Public Sector (15%).
  • The PDF document is searchable - so you quickly find information if you don't want to read the document completely.
  • The biggest challenge for agile testing is the "Lack of appropriate test environment and data."
  • The two two skill types most sought after are: Functional Test Automation Expertise and Production Quality Monitoring Skills.
  • Most High Tech companies are cloud-based (77%!) Knowing Cloud base testing tools is critical for long term QA Employment.

Get the World Quality Report

I would highly recommend getting the report and reading all the information. It's a good way to understand the trends around the world.

February 11, 2019

Slack Tips for QA

More and more organizations are using Slack as their main communication tool. Knowing some tips/tricks can help QA deliver messages to the team more efficiently.

Here's three style tips on using Slack:

Avoid the Noise and use Threads

Replying to issues and comments via Slack thread can help de-clutter release day noise. To start a thread, simply hover over the message and click on 'Start a thread' icon.

More tips on Threads on the Slack help page.

By using thread to manage issues, new issues won't get distracted by all the conversations of a previously reported issue.

Emoji Icons in Messages

Add the appropriate icon before your message so people can instantly know what's going on:

qa Emoji Slack

You can find some QA Slack Icons from my previous post, or at Slackmojis.com .

BackTick Branch Names for Readability

Using backticks on branch names helps make the branch stand out. That way people can quickly identify the branch when they are scanning the Slack conversations.

Example setup:

Backtick Slack

I have a Keyboard Maestro action set up so that it automatically post the build status of a Git build in a particular Slack channel. This way I don't have to worry about informing the team of the action.

February 4, 2019

What Wikipedia Can Not Tell You About Test Link

TestLink is a very useful test case repository management software. When the company gets bigger it's time to consider investing in an application that can meet the challenging needs of the company.

I like TestLink, but it just not as useful as it was when we first installed it 8-years ago.

TestLink Board

Four Annoyances using TestLink

Here are my annoyances with using TestLink. We currently use TestLink 1.9.3 (Prague).

Integration with Jira/Slack

Most competing test case repository applications have integration with Jira. This allows developers to assign test cases that they would like QA to run when testing a particular issue.

As for Slack, It would be nice to call out particular test cases from a test case repository. For example, if someone ask for the regression test of Cookies in Chrome - someone could link to the actual test case. You can not link to particular test cases in TestLink.

Easy Test Case Import

TestLink isn't fun to work with when you need to add a bunch of test case. This is a problem when your implementing a new feature and want to add a bunch of test cases. There is some support for importing from Excel documents but it is a complex process.

Also vise versa, if there was a major product change, it isn't very easy to modify all the test cases that are impacted by the change.

A Test Case repository should be super flexible so that QA Engineers will want to use it. Its shouldn't be an environment that QA despise using.

The overall feeling about TestLink, from QA team members, is that it is not a very joyful experience.

Better Management of Test Cases

It takes a while to understand how to manage test cases in TestLink. Every once in a while, I'll need to log in and go through the test cases to see which ones are still relevant. It's just a complex process of going through the test cases and removing them them from the current test plan.

Having multiple test plan builds slows down the reporting process - for some unknown reason. I frequently have to cleanup old builds so that the reporting takes a reasonable time to build.

No Automation Support

Automation is now essential to any QA process. TestLink has no automation support. It would be great to have a central application that the QA can understand the coverage.

I wouldn't expect to execute automation from TestLink, but there should be a way to see which issues are being controlled by automation.

December 31, 2018

Best QA Posts of 2018

QA was a new topic added this year. The goal was to post useful tools and techniques that I use all the time.

In December, I changed the Monday post to focus more on Amazon Alexa apps that I recently created. QA Post should return sometime in January 2019.

Best QA Posts of 2018

Here is the most useful post that I found this year.

  1. Google Testing Blog - Great place to learn how Google tests their software. You can learn all about current strategies and what works in a high availability environment.
  2. Postmortem Document - When releases go bad it's good to learn what happened and come with ideas to prevent future failures. This postmortem document is a useful way to organize the Postmortem meeting.
  3. BugMagnet - A must have Chrome extension to test form fields. Great way to validate emails and credit card fields.
  4. Jira Short cuts for QA - Move around Jira quicker and be more productive. Lots of people have use this for a quick reference.
  5. EditThisCookie - A Chrome extension that makes it easy way to modify the browser cookie.
  6. Throw Away Email Accounts - Great resource for when your testing email functionality. Easy to use and validate emails.

Goals for 2019

In 2019, I plan to focus more on techniques and strategies in QA testing. Together we'll learn how an increase in features and functionality doesn't matter as long as you have a good weekly testing strategy - which includes automation.

I am looking forward to learning more and sharing some cool QA tools.

November 26, 2018

Bashrc Configurations for QA

QA tends spend a lot of time using command line commands in unix. There are some useful Bash Configurations that can make things a bit easier.

Simply add these to your .barshrc or .bash_profile, for example you may want to add multiple SSH shortcuts to go to different servers. Check your Bash .history file for examples of commands that you frequently use - you may find adding an alias may increase your productivity.

Bash Examples


# Quickly go up 'X' number of directory hierarchy. Example: use: up(3)  instead of cd ../../..
up() { cd $(eval printf '../'%.0s {1..$1}) && pwd; }


export EDITOR="/usr/local/bin/bbedit"   # Mac Users should use BBEdit as their Text Editor
alias goshh='ssh -A bravo.google.com'   # Quick Way to SSH to your servers
alias ll='ls -FGlAhp'                   # Get a nice directory listing

Tech Note: The above was created using the "Copy as Styled HTML" command in BBEdit. It's an easy way to share color syntax.

November 19, 2018

Copy CSS Selector

One of the toughest tasks with automation is figuring out the XPath for objects that don't have name IDs. This usually involves looking at the source code and counting the objects from the last established object. This slows down the automation process and makes it a no so exciting task.

There is an easy way, it's using a popular Chrome extension called "Copy CSS Selector." Here's a description from the Chrome Extension page:

Find the unique selector for any element on page.

It will find an optimal selector that's unique to the element selected. Right click on the element with mouse and select Copy CSS Selector menu item into a buffer, so you can past copied selector to any text editor.

Very useful for quickly getting selector for any element for testing frameworks like as Selenium.

Click Selector

Four Things I Learned about the Copy CSS Selector Tool

A copied selector will look like this:
div.grid__6-primary-content-homepage.grid__6-primary-content-homepage--right > div > a > div.image-tease__text or
tr:nth-child(2) > td:nth-child(8)

The "Copy CSS Selector Tool" Dev Tools is available in the Elements tab, it's the last item in the Styles window. This will show both the path and the selector of the selected element.

Google Copy C S S Dev Tools

There isn't any configuration for the Copy CSS Selector.

Google Chrome has a "Copy XPath" available. (In Dev Tools, Right click on an Element, Select Copy, then Copy XPath) This is a sample value you get:
/html/body/div[4]/div/div/div/div/table/tbody/tr[12]/td[5]

This is what you get when using the "Copy CSS Selector" Tool, I tested the same element:
tr:nth-child(12) > td:nth-child(5)

You can decide which element works best for your development needs

Getting Copy CSS Selector

The Copy CSS Selector is free and can be download from the Chrome Store.

November 12, 2018

Check My Links

If you're testing a new set of pages, it's a good idea to make sure all the links are working correctly. This is especially needed when a site had been sitting in a particular environment for a long time.

The worst case scenario is the CEO reporting broken links right after release.

The Chrome Tool, Check My Links, makes it super easy to find any broken links on any page. Simply click on the extension icon in Chrome and it goes through all the links on the existing page.

Description from the Developer

Check My Links is a link checker that crawls through your webpage and looks for broken links. 'Check My Links' is an extension developed primarily for web designers, developers and content editors.

'Check My Links' quickly finds all the links on a web page and checks each one for you. It highlights which ones are valid and which ones are broken, simple as that.

HTTP response codes and full URLs of broken links are published in the Console log (Found in: 'Chrome > Tools > Javascript Console' or Ctrl+Shift+J).

Google Link Checker2
Lots of links on Google.com - No broken ones! QA approves!

Notes about the Check My Links Tool

As mention above, any broken links appear in the console log. When I first started using the tool I got confused to how to find the broken links.

QA best practice is to have the Chrome console log open when testing a web application.

You can exclude URL checking by putting it in the extension option sections, simply right-click on the extension icon and select options.

If you have a lot of links on a page, Consider using HEAD as the method of request since its quicker.

If your busy regression testing, it might be useful to turn on Cache and AutoCheck. That way 'Check My Links' will run every time the page loads. By enabling cache, you'll only get real requests from new URLs on a page.

Did you know that there are 32 links on Google.com? There are no broken links!

November 5, 2018

QA October Graphic Files

October was a pretty quiet month for using Memes in the Slack channel. Most of the images were already in the library, but I did come up with five new ones. Hopefully, this is a reoccurrence for the rest of Q4.

Be sure to check out the library for all the QA Graphic files.

Best Can Do
That's the Best You can Do?
http://www.cryan.com/qa/graphics/BestCanDo.jpg

Hows Automation
How is Automation going?
http://www.cryan.com/qa/graphics/HowsAutomation.jpg

Failed Testing Sticker
Failed Testing Sticker
http://www.cryan.com/qa/graphics/FailedTestingSticker.jpg

October 29, 2018

Picture in Picture in Chrome

Chrome recently shipped version 70 of the Chrome Browser, and with that came some pretty cool features - including picture-in-picture functionality.

What Make Picture-In-Picture Special for QA?

The reason QA should be excited about the picture-in-picture functionality is that it can make learning a bit easier. Now you can have a video of some lesson open while you interact with it on your computer. You can interact with Chrome Tools while learning about the features.

J Query Picture Picture
Using Picture-in-Picture is a great way to interact with instructional videos.

Currently picture-in-picture support among popular learning sites:

  • YouTube - Works
  • Lynda.com - Works
  • Udemy - Not Working

How to Use picture-in-picture

Right click on any video and you should see an option for "Picture in Picture." Select it and the video clip will pop out of the page and to the bottom right corner.

For YouTube, you will actually need to right click twice as YouTube has its own set of right-click controls. Right-clicking twice will enable the system default to right-click behavior.

Some Notes

  • In order to play the video, you have to keep the tab open.
  • You can resize the picture-in-picture simply by dragging any corners.
  • The picture-in-picture functionality won't work when you have another application in full-screen mode. For example, if your learning Swift Programming, you can't use Xcode in full-screen mode while viewing the video.
  • When you hide Chrome, you also hide the picture-in-picture window. When working with other apps, simply cover the Chrome browser window and bring the picture-in-picture in front.
October 22, 2018

Slack Reminders

Slack is trending to be the most popular communication tool for companies. Knowing some basic commands can help make communicating information a lot easier. This can help getting the most out of Slack.

Slack Personal reminders are a practical way for QA to stay on top of communicating messages - such as Code Freeze Reminders, Stand-up or sending out the weekly release notes.

Frequent Future reminders are a good way for you to take a step back - such as a self performance reminder. Don't wait for review time to put together your self review, set up a reminder so that you can record the excellence that you do now. Chances are you may forget them six months from now.

Setting up a Personal Performance Reminder

In your "Direct Message" slack channel, setup the following reminder:

/remind me "Take note on some personal excellence that you did in the past couple of weeks." every other Thursday at 4:00pm
/remind me "Take note on some personal excellence that you did in the past month." on November 1 at 4:00pm
/remind me "Take note on some personal excellence that you did in the past month." on December 3 at 4:00pm
/remind me "Take note on some personal excellence that you did in the past month." on February 1 at 4:00pm
/remind me "Take note on some personal excellence that you did in the past month." on April 1 at 4:00pm

Some Fun Reminders:

/remind me "Today is World Quality Day - 'Quality: A question of trust ' " on November 8 at 9:00am
/remind me "Today is National Qa Engineer Appreciation Day " on April 26 at 9:00am
/remind me "Today is the Day of the Programmer" on September 13 at 9:00am
/remind me "First Instance of Actual Computer Bug Being Found - September 9, 1947" on September 9 at 3:45am
/remind me "Selenium Day - Launched on October 22, 2004 " on October 22 at 9:00am

October 15, 2018

Firefox JavaScript Scratchpad

Firefox Scratchpad is a useful tool to test JavaScript code on any website. It's different than Chrome's web Console since you can have multiple lines of JavaScript and get good debugging feedback if the code fails to run.

To open Firefox's scratchpad window, simply type Shift-F4

You'll get a new window with the following commented text:

/*
 * This is a JavaScript Scratchpad.
 *
 * Enter some JavaScript, then Right Click or choose from the Execute Menu:
 * 1. Run to evaluate the selected text (Cmd-R),
 * 2. Inspect to bring up an Object Inspector on the result (Cmd-I), or,
 * 3. Display to insert the result in a comment after the selection. (Cmd-L)
 */

Fire Fox Scratchpad

JQuery QA Example

Here's are some example code that might be useful for QA to use in the FireFox's Scratchpad, these only work on websites that are using JQuery:

Check for External Links

This bit of code is useful when you want to highlight all external links on the page:

function link_is_external(link_element) {
  return (link_element.host !== window.location.host);
}
$('a').each(function () {
  if (link_is_external(this)) {
    $(this).css({
      color: 'pink'
    })
  }
});

Highlight a Particular Word

Quick way to see if a certain word appears on the page:

$("body").html($("body").html().replace(/Company Name/g,'Company Name'));

Show the links to all the images on the current page:

var pics = $$("img");
for (pic in pics) {
  console.log(pics[pic].src);
}
October 8, 2018

Framed! Browser Extension

Doing testing in production is very risky, and there are times when you may not be aware that you're in production. There is a tool called "Framed!", that will let you know when you're in Production. Now you'll be aware when you're in Production with a simple frame around the website.

Developer Description

This tool grants you the power to add a custom border to visually separate different web hostsFrame your hosts, avoid mistakes!

As a web developer you are probably working with a bunch of different environments, all looking almost exactly the same. Keeping track of whether you are on a more safe-to-experiment development server, or if you accidentally stumbled in on the live server, isn't all that easy or obvious.

Laptop Framed

Four Things I Learns about Framed!

  • You can use a wildcard for the hostnames, so *.company.com will handle all sites under the domain.
  • Set a custom frame id name, so that it doesn't interfere with any existing property.
  • If you're using a Retina Display, use a larger border width so it's more visible. 8px worked well in my testing.
  • The nice thing about Framed! is that you just need to set it once. If you haven't used it in a while, you may wonder why certain sites have red frames around them.

Get Framed!

The Browser utility is available for Firefox and Chrome.

October 1, 2018

New QA Images

Today I updated the QA Image library with ten new graphics. Most of these were created as a result of testing this past September. These are perfect to add a bit of humor in Slack:

Sample of some of the images, visit the QA Graphic Library for all the files:

waiting_1
QA Waiting for Developers to fix a bug.
http://www.cryan.com/qa/graphics/waiting_1.gif

Code Freeze
http://www.cryan.com/qa/graphics/CodeFreeze.jpg

Now Patching
http://www.cryan.com/qa/graphics/NowPatching.gif