Quality Assurance Image Library
This is my carefully curated collection of Slack images, designed to perfectly capture those unique QA moments. Whether it's celebrating a successful test run, expressing the frustration of debugging, or simply adding humor to your team's chat, these images are here to help you communicate with personality and style.
Country Flag Icons
This week's QA post features flag stamps for Snagit. There are 12 countries featured in this collection:
- Australia
- Brazil
- Canada
- China
- European Union
- France
- Germany
- Italy
- Japan
- South Korea
- United Kingdom
- United States
These countries were selected based on the popularity of using - especially for e-commerce testing.
Why Would You Need Flag Stamps?
If you're doing any type of international testing, you may want to highlight the locale of certain screenshots - especially if you are doing a side-by-side comparison.
This is just something nice to have when you need it.
Image Size
There are two image size sets - one width is 250 and the other is 500. The thought is that there are times when you may need a big stamp and times when you would want a smaller stamp.
Just import what you think you would use. Obviously, you can always downsample the image - but why do that every time you use it?
Snagit Limitations
Snagit doesn't take the file name as part of the search term. I thought by having the name and width in the name, it would appear as part of the search term.
This means that you will have to add the search term if you want to search for these flags at a later date.
Snagit QA Templates 2.0
Last week, I introduced some Snagit Stamps that would be useful for QA.
This week is another useful collection of stamps for QA:
Collection Contains
- Warning - Useful to highlight some warning issue.
- Red Light - Draw attention to some issue on the page.
- Red White X - I find the standard "X" to be boring.
- Red X - Just a different 'X' to use when there's a lot of issues on the page.
- Pin Mark - Use to point out little things on a page.
- Markers - Adds a little flare to those highlighted texts. There's Red, Green and Yellow for some variety.
Sample
Next Week Post?
Next week the QA blog post will be focused on International QA stamps for Snagit.
QA Snagit Stamps
Stamps in Snagit are a great way to touch up images. There's all sorts of creative ways to draw attention to your screenshot.
Recently, I created some stamps to help pinpoint where a screenshot was taken. This is useful when I am doing a side-by-side comparison.
Sample Screenshot
Download
Download the Snagit QA Templates
I am making my QA stamps available for anyone to use. Some notes:
- There are six images in 2 Categories - Production and QA.
- Each category has Blue, Green and Red. (Useful when you want to highlight a Good, Bad, or Info image)
- Image Dimensions are 510 x 413 and resizable in Snagit.
- Images are transparent PNG - they should look good when placed on your screenshot.
Snagit Features
Snagit is a 'must have' tool for any QA developer. It provides a way to capture the screen and advance annotation tools.
Too Expensive?
While some people may be turned away from the price - after all Apple provides a screen capture tool for free. Snagit is more than just a screen capture tool, it provides a way for users to better communicate a message.
For QA engineers, the better the communication the quicker an issue can be fixed.
Here are four tools that I use all the time in Snagit.
Hacking Wordle with some Snagit stamps
Stamp Tool - Some people may think this is a clip art library. I disagree, there are so many useful stamps here - including mouse pointer, green checkmark, red x, and many more. These are available as part of the default install. Please rest easy you won't need to spend a single penny to get useful stamps.
The great thing is that you can add your own. Some that I have added include country flags, Facebook's thumbs-up, and logos for some JavaScript libraries for testing.
Whitehouse website with a cut tear
Cut Out Tool - Easily remove the centerpiece of a screenshot that is not relevant to the issue. This is a great way to show the header/footer of a page to highlight discrepancies. The Cut Out Tool has horizontal and vertical cuts as well as tear effects. Yes this could easily be done in other graphic tools, but why open another app, when Snagit has the ability to do it for you?
Showing some step tool in an old Macintosh program
Step Tool - Use this tool to highlight features in a screenshot. Maybe you are testing new navigation and you want to show the five features that were fixed. The Step Tool auto increase each time you click on it, and you can always change the numerical value after applying it.
Using Spotlight and the Simplify tool. Can you guess the site?
Spotlight Tool - Draw attention to a particular part of an image. The nice thing is that you can have multiple Spotlights - using different shapes. This makes it easy to point out something in an image without having to use a bunch of arrows.
Three Features That I Would Like to See Implemented
Ability to combine screenshots - Sometimes I like to overlay one screenshot over another and remove sections. I'll do this when I want to show different tooltips on the same page. This would be simple as selecting images in the recent bar and having a combined image functionality.
Crop Overlay Images - It would be nice to have the ability to crop an image that is over another image. Right now when you apply the crop tool it impacts the whole image. The same goes for the Eraser tool.
Webp Support - Google introduced Webp in 2018 and is supported by all the major browsers. The compression helps reduce file sizes - which in the long run will help reduce the need to buy additional storage.
National Margarita Day
Happy National Margarita Day!
That got me thinking if I was a bartender and I had to create a Margarita drink for QA, what would it be?
- Hot and Spicy?
- Green and Red?
- Extra Strong for those test days?
- Mostly water - playing it safe?
My selection would be a Green Margarita made with Super Green Juice. That's basically a mix of Apples, Lemons, Romaine, and Cucumber.
Typical Margarita Ingredients
- 1 lime wedge, plus 2 lime wheels for garnish
- 1 tablespoon coarse salt, for glass rims
- 4 ounces (120ml) high-quality blanco tequila
- 2 ounces (60ml) Cointreau
- 1 1/2 ounces (45ml) fresh juice from 2 limes
Directions
- Run lime wedge around the outer rims of 2 rocks glasses and dip rims in salt. Set aside.
- In a cocktail shaker, combine tequila, Cointreau, and lime juice. Fill with ice and shake until thoroughly chilled, about 15 seconds (the bottom of a metal shaker should frost over).
- Fill glasses with fresh ice and strain margarita into both glasses. Garnish with lime wheels and serve.
Super Green Juice
In a juicer, mix up a combination of order, the lemons, apple, romaine, cucumber, and greens,
Special equipment
Cocktail shaker, cocktail strainer
Get the Full Recipe
The Food Network has the full recipe.
Drink Responsibly. While Drinking and Software Testing isn't illegal in the United States - don't give your state reps any ideas.
QA Info Bar Bookmarklet
When testing a webpage, sometimes I want to add additional information before taking a screenshot. While I can always use Snagit to add text post screen capture, there can be a better way to do this in the browser.
In a recent test, I wanted to add the Domain and screen size to the screenshot - for general reference. I thought it would be good to use a Bookmarklet to get this accomplished.
Kasper Mikiewicz wrote a cool Bookmarklet to "Debug window width & height" on Coderwall. This bookmarklet adds a window reference to the bottom right corner. I decided to modify it and add the domain name of the page:
Drag Code to Your Bookmark Bar
Select this text and drag it to your bookmark bar:
javascript: var debug=document.createElement('div');debug.id='#debug-window';debug.style.font='16px/1.5 Arial';debug.style.color='#fff';debug.style.zIndex=2147483005;debug.style.textAlign='right';debug.style.background='#1aa260';debug.style.padding='.5em 1em';debug.style.position='fixed';debug.style.bottom=0;debug.style.right=0;debug.style.borderRadius='3px 0 0 0';(document.getElementsByTagName('body')[0]).appendChild(debug);window.onresize=function(){debug.innerHTML=window.location.hostname+' | '+window.innerWidth+'x'+window.innerHeight+'px';};window.onresize();
Demo This Bookmarklet - You can also "drag and drop" that link to your bookmark bar.
When you click on the link in the Bookmark Bar you'll see a new box on the bottom right of the webpage.
This is really useful when you are testing responsive design because the height/width will change as you resize the browser.
I added the Z-Index so the "QA Info bar" appears on top of any other object.
More Bookmarklets
Some more bookmarklets that I shared in the past:
Check out the Browser Badge Bookmarklet. - Add a logo to your page to show you tested in Chrome.
Create Dynamic Bookmarklets - make Jira searches practical.
Quick Editor - Create a blank page for a quick note.
Blue Green Deployment
The Blue/Green deployment is when release engineering stages up a new instance of a production environment and they slowly move traffic to the new instance. Once the traffic is 100% on the new environment the old one gets taken down.
This is usually done to implement a zero-downtime deployment. Configurations to get this done is usually done using a Loadbalancer.
Some QA Notes About This
Production Only Many organizations will not put a Blue/Green deployment in the staging environment - usually because of cost and other logistics. This adds some risk to the release as QA isn't able to test the changeover.
Real World Example
We have several automation scripts that run at each release to test critical featured that have broken in the past during production deployment. We are at "All Hands on Deck" at release time.
Downtime may still be needed. There has been times when we had to do a major database upgrade and the Blue/Green deployment makes the process more complex than it needs to be. In those times, we alerted customers of the downtime - usually off hours and put together a plan to minimize the downtime.
Real World Example
Whenever we do a major database change, we would schedule some downtime for backup and as a precaution. An example of a major change would include a DB upgrade.
Patching Still Possible! You can still implement code patches in the Blue/Green model. The developer needs to commit the code change to "master/main" so that it gets implemented in the next release. We found that JavaScript changes were harder to patch than "basic" code changes.
Real World Example
Unfortunately we did a lot of patching. They would be easy to implement. In most cases, the Developer would have to provide a diff of their changes against the current production build. The infrastructure team would be responsible to update the code on the servers.
Safe Production Testing There might be times when you need to test certain features in the Production environment. Using the Blue/Green Deployment the Infrastructure team can load up an instance but not make it public. QA can go through a specific URL to test before the stack is live.
Real World Example
There are some third party changes that may not be testable in a QA environment. We had an API change that depended on the URL/Domain and testing some functionality wasn't possible in the QA or Staging environments.
PyTest Install
The popular pytest framework makes it easy to write small tests, yet scales to support complex functional testing for applications and libraries.
Python is a good language to learn. According to the TIOBE and PYPL index, Python is the top programing language with C and Java closely behind.
If your application is Python base, QA Engineers may find that writing automation in Python may lead to a better understanding of the code logic - which in turn will result into better testing.
If your installing PyTest on your local MacBook Pro at work, you may run into issues with permissions. The local IT department may have your computer locked down and some of the installs will require Administrator permissions.
Here are the install instructions if you have limited rights.
PyTest User Install
Use Python3 -m pip to install PyTest and Selenium:
python3 -m pip install pytest --user
python3 -m pip install selenium --user
Sample Test File
Here's a simple code sample to validate the install worked:
#!/usr/bin/env /usr/bin/python3 # Verify the Pytest was installed import pytest from selenium import webdriver import sys import requests from selenium.webdriver.chrome.service import Service from selenium.webdriver.common.by import By from webdriver_manager.chrome import ChromeDriverManager from time import sleep def test_google(): global chrome_driver chrome_driver = webdriver.Chrome(service=Service(ChromeDriverManager().install())) chrome_driver.get('https://www.google.com/') title = "Google" assert title == chrome_driver.title pageSource = chrome_driver.page_source gateway = "Carbon neutral since 2007" if not gateway in pageSource: pytest.fail( "Google Changed their Webpage") chrome_driver.close()
Save this file on your computer, I would recommend saving it in ~/pytest/google.py
Execute Test
To execute this test, open up Terminal:
cd ~/pytest/ pytest --no-header -v google.py
QA January Memes
In honor of Burn's Night, here are some QA Memes in poetry form.
Poems
Gregory Boyle's advice, "If you can't fix it, feature it."
John Deere has a saying - Quality is Cost and Cost is Quality
I created this using a poem generator.
The Buggy And Risky Code
A Poem by qa
Whose code is that? I think I know.
Its owner is quite happy though.
Full of joy like a vivid rainbow,
I watch him laugh. I cry hello.
He gives his code a shake,
And laughs until his bellyaches.
The only other sound's the break,
Of distant waves and birds awake.
The code is buggy, risky and deep,
But he has promises to keep,
After cake and lots of sleep.
Sweet dreams come to him cheap.
He rises from his gentle bed,
With thoughts of kittens in his head,
He eats his jam with lots of bread.
Ready for the day ahead.
BostonGhost.com Email
A long time ago, I purchased the BostonGhost.com domain to use for testing. I never did anything with it, but still have the domain thanks to a hosting provider that I worked at.
Every once in a while I would get business inquiries about the domain. Usually, it's a sign of mass mailing, and the sender doesn't pay much attention to the potential client.
This is one such email that I recently got:
QA Fails the Email
Here's are four reasons that QA fails this email:
- Why would I trust an email coming from gmail.com? Do they not have a legitimate business? Shouldn't the sender be using their domain name? If you are so good, wouldn't you have a domain name-
- Nice generic hello statement. You couldn't capitalize the domain name-
- "Hope Your Doing Well?" Like you really care how I am doing?
- Nice that you keep the variable placeholder in the email. That clearly shows that you pay attention to your emails. I certainly want to trust my Social Media Optimization and SEO to your company.
We All make Mistakes
I didn't call out the name of this company. We all make mistakes.
You should always test your email campaign before sending it out. At least have a second set of eyes to offer some constructive feedback.
Want to know why your conversion rate is low? You're not testing.
About
Welcome to QA!
The purpose of these blog posts is to provide comprehensive insights into Software Quality Assurance testing, addressing everything you ever wanted to know but were afraid to ask.
These posts will cover topics such as the fundamentals of Software Quality Assurance testing, creating test plans, designing test cases, and developing automated tests. Additionally, they will explore best practices for testing and offer tips and tricks to make the process more efficient and effective
Check out all the Blog Posts.
Blog Schedule
Sunday | Open Topic |
Monday | Media Monday |
Tuesday | QA |
Wednesday | Python |
Thursday | Final Cut Pro |
Friday | Macintosh |
Saturday | Internet Tools |