Testing Tip: Screenshots on Firefox

Without a doubt, one of the most important things you can submit with a bug is a screenshot.  For those of you using Firefox, check out the excellent Screengrab extension.  It’s completely free and allows you to take a screenshot of the entire page at once rather than just what’s visible in your window.  It also saves the files in PNG or JPG formats – making them smaller and more manageable than TIFF or BMP files.

Take a look at this screenshot of the homepage for the Software Testing Club:

software-testing-club-online-qa-software-testing-community_1239721283757

Only half of that would be visible in an ordinary browser window.  The plugin also lets you capture selections of a page, so you can also use it to highlight important errors.

Here’s a bonus link.  Check out this excellent post on Mashable with 7 Useful Tools for Web Development Testing.

5 Responses to “Testing Tip: Screenshots on Firefox”

  1. Rosie Sherry said:

    I like your choice of screenshots!

  2. Stanton Champion said:

    Glad you liked it! :)

  3. Bug Ed said:

    I would suggest a better option on same, its known as “Fireshot”
    http://screenshot-program.com/fireshot/ or
    https://addons.mozilla.org/en-US/firefox/addon/5648

    Its working effectively only both FF and IE

    Screenshot : https://addons.mozilla.org//en-US/firefox/images/p/25489/1220429515

    FireShot Features

    Screen Capture modes:

    * Capturing entire web page : Captures whole web page and displays it in editor.
    * Capturing visible area : Capturing your foreground window.
    * Capturing a region : Before capturing, an editor is displayed and a crop tool could be used to obtain desired region.

    Selection tools:

    * Area selection tool: provides rectangular and elliptic selection creation for further graphical processing.

    Graphical tools which work with selections:

    * Crop tool: cuts off everything that is outside of the selection. This tool is useful when you want totally exclude something from your screenshot.

    * Fill tool: fills selection with specified color. You may use Color Picker to select a color from the captured screen. This tool is useful when you want totally exclude something from your screenshot.

    * Gaussian blur tool: blurs selection so that it’s impossible to say 100% what you see. This tool is useful when you don’t want totally remove something; you just need to make it non-readable.

    * Grayscale tool: converts colors inside selection to grayscale. This tool is useful when you want to send something to background as minor content.

    * Color Inversion tool: inverts colors inside selection. This tool is suitable for highlighting.

    * Glowing edges tool: creates glowing edges around selection. This is very spectacular tool to attract somebody’s attention to one or few details at your screenshot.

    * Interlace tool: interlaces selection. This tool is useful when you want to mark something as minor content.

    Vector instruments:

    Vector instruments have been developed to help user quickly and effectively annotate captured screens. They’re placed in separate layer and can be modified/removed at any time.

    * Text and Shape tool: allows you to highlight desired fragment using Rectangular or Elliptical shape and annotate it. This tool is useful when you want to apply annotation to the fragment of your screen and you want to specify boundaries of this annotation.

    * Text and Freeform Drawing tool: allows you to create freeform drawings and attaching text messages to them. Useful when you want to create original objects.

    * Text and Line tool: allows creating a pointer supplied with text description. Useful when you want to quickly point at something.

    * Text tool: provides text box for simple annotation addition. It is useful when you want to simply leave a comment.

    Screenshots be stored as:

    * PNG (Portable Network Graphics) format: provides lossless way to store graphical data. In addition, PNG structure allows saving additional user-defined information. This feature is used for storing vector objects and other editor info inside PNG.

    * JPEG (Joint Picture Expert Group) format creates mostly less file size, but worse picture quality than PNG does.

    * BMP (Bitmap Picture) format creates good quality picture, but its size is bigger than PNG and JPEG practically.

    * ZIP file: all program output described earlier can be put to ZIP. This can dramatically reduce output file size.

    * Screen Captures can be saved to disk.
    * Screen Captures can be copied to clipboard.
    * Screen Captures can be sent by e-mail.
    * Screen Captures can be opened in another editor.

    I hope this is helpful
    Bug Ed

  4. Stanton Champion said:

    Bug – that looks like a great tool. I don’t think it works on the Mac, but for Windows users it could be fantastic. Thanks!

  5. Bernard L. said:

    I agree absolutely with Bug Ed.
    I’ve been using FireShot for a few years now and I find it the most productive & professional screenshot extension for Web applications/browsers. Off-course I use it for all uTest releases’ bug reports. :)

    Its top features in my opinion are:
    * Full web page screenshot
    * Annotate
    * Interlace
    * Glowing edges tool

    Bernard.

Leave a Reply