QA blog postings

QA Postings

Earliest: November 26, 2017Latest: December 31, 2018Total: 50

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