jQuery Techniques

jQuery is a powerful JavaScript library that helps make web development easier. In addition to its many features, jQuery also includes a number of tips and tricks that can be useful for quality assurance developers. Some of these tips include using the .each() function to loop through arrays and objects, using the .filter() function to select specific elements from arrays or objects, and using the .map() function to create new arrays based on existing arrays. These tips can help make your code more efficient and easier to read, which can lead to better quality assurance results.

Quality assurance (QA) software testing is an important process in the development of any software application. By using jquery, you can make your QA testing process easier and more efficient.

jQuery is a JavaScript library that simplifies the process of writing code for web applications. It provides a wide range of features, including DOM manipulation, event handling, animation, and Ajax interactions. This makes it perfect for use in QA software testing.

jQuery can be used to test all aspects of an application's functionality. You can use it to simulate user interactions with the application, test its performance under different conditions, and verify that its output is correct. In addition, jQuery's cross-browser compatibility means that you can be confident that your tests will work on all major browsers.

Check to see if JQuery exists

This is a simple command to see if a particular site is using jQuery:

Open the Chrome DevTools console: Option-Command-J

console.log(jQuery().jquery);

If Successful:

3.5.1 -ajax,-ajax/jsonp,-ajax/load,-ajax/script,-ajax/var/location,-ajax/var/nonce,-ajax/var/rquery,-ajax/xhr,-manipulation/_evalUrl,-deprecated/ajax-event-alias,-effects,-effects/Tween,-effects/animatedSelector

If Failed:

VM35:1 Uncaught ReferenceError: jQuery is not defined
    at :1:9

Add jQuery via Console

This is a simple command to add jQuery to any website via the Chrome Console::

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

Now you can easily run your favorite jQuery commands, such as this one to check for the presence of IDs. This is an example code snippet to show IDs that don't have names:

$('*:not([id]):not([class])').css("border","2px solid red");

Design By Contract

Many Moons ago, we were having serious bug issues with code at the company I was working at. No matter what developers did, bugs make it into Production and we constantly had to patch.

Part of the reason QA didn't discover some of the bugs was because of the complexity of some accounts.

Things slowly got better when a Senior Software Architect started implementing a Design By Contract coding standards

What is "Design By Contract?"

Design by contract is a different approach to programming. It promotes think-first, code-later in order to get a better quality of the software.

This is accomplished by defining clear APIs in the code between its various components. Each method needs to define what it takes as input and what the expected output will be. The output may be the return value of the method as well as a change of state of the enclosing object.

The great strength of design by contract is to have each method responsible for what it does and what it returns. It is on the caller to be responsible for what is given and the callee to return predictable results.

Ideally, contracts and methods are defined prior to actually coding the body of the methods. It is impossible to define the contract of something you do not know. This requires a lot of heavy thinking in advance which saves a lot of testing and unknowns later. It also makes the code easier to review and makes changes easier to implement as you do not have to guess about the context. Callers and callees state exactly their input, outputs, and what they do.

How did this Help QA/Releases?

Developers now had a better understanding of how their code works. It allowed other developers to understand how the code functions and pass the correct parameters.

When the code would fail there would be an assertion exception and it would be easy to figure out the issue.

Basically the Design By Contract moved the quality of code from QA to the Developer.

Five Things I Learned

It took a while to implement the Design By Contract throughout the system. Developers get used to planning before coding. Once they saw the benefits they were quick to adapt to the new model.

The Senior Software Architect worked with a small team of developers and a particular functionality within the software.

The Design By Contract coding standing stayed within the application long after the Senior Software Architect had left the team.

When testing code, QA would pay more attention to the logs and look for assertion errors - sometimes these would start as silent errors but would eventually turn into a serious customer-facing errors.

An interesting side effect: Developers were able to find serious logic issues with the Google AdWords API. This was interesting as other companies didn't report the issue. In some cases, Google fixed the issue, and in other cases, we worked around the issue.

Code Slush

Code Slush, sometimes called Code Chill, is when you take a snapshot of the code in the Main/Master branch and test the stability of the release. It occurs usually before code freeze so QA to get a quick assessment of the release.

Difference between Code Freeze and Code Slush

Code Freeze occurs when no new code can be committed to the current release cycle. This is the code that is ready for Production.

Code Slush is just a snapshot of the release - developers could still commit code to the release branch. However, Developers should use caution when adding code as the code base as there may have been a lot of code changes for QA to validate.

When to Do Code Slush

In the past, we have done Code Slush when we skip a release week - usually because of a holiday or at the end of the quarter. QA will test the stability of the release branch at a certain point of time - usually by running automation or simple Acceptance Testing.

Code Slush is also done when a couple of major changes are added to the release that requires full regression - such as a third party API update. QA may need add

There have been times where a Code Slush would be implemented right after a long weekend - just to see how things are.

Five Things I Learned

It's good to announce that a Code Slush is going to occur. Developers that might have been waiting to commit code may do so before Code Slush.

It's good to have a specific set of Acceptance Tests for Code Slush. The test should be quick. A code slush is performed to make sure a specific component is working before a code freeze.

Code Slush worked great between long release cycles. It gives QA a heads up on how stable the release is before the code freeze. Useful if you do midnight code freeze and there's no developer around.

We have done several schedule Code Slush when Google released a new API. This allowed QA some extra time to do some testing - especially if you have to wait 24 hours to see specific results.

Sometimes when a developer makes a very risky change, they will request a Code Slush immediately after merging the code in - just to make sure that the changes aren't producing some unexpected changes.

Country Flag Icons

This week's QA post features flag stamps for Snagit. There are 12 countries featured in this collection:

Download the Flag Images

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:

Download Zip File

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:

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

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

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

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