Capturing Web Page Images

When recording a test, you can create a region checkpoint to capture the web page image and automatically insert test instructions that will compare this image with the actual image of the web page:

• Click Add Check on the Recording toolbar. The Checkpoint wizard will appear.

• In the wizard, click Image.

• Select the web page, the image of which you want to capture.

• Specify comparison parameters and the comparison mask, if needed.

• Click Finish.

TestComplete will save the current image of the web page to the Regions collection and record a checkpoint that will verify the web page’s actual image against the stored one.

It is possible to capture web page images at design time and save them to the Stores | Regions collection of your project. To do this:

• Right-click the Regions collection in the Project Explorer and select Add | New Item from the context menu.

  – or –

  Select New Item from the context menu of the Regions Editor.

  The Add Image wizard appears.

• Select Capture a window or region and click Next.

• Select the web page, its object or area to capture and click Finish.

TestComplete will capture the image of the specified web page or object and automatically add it to the Regions collection. You can then make use of this object in your tests.

To capture the web page image from a keyword test or script, call one of the following methods on the Page object that corresponds to the web page:

• Picture - Captures the visible part of the web page or its area.

• PagePicture - Captures the entire web page image, including invisible areas that are scrolled off the screen.

  Note:

  If your web page includes “sticky” elements (elements with a fixed position), for example, a navigation menu at the top of the page, use the Options.Web.CSSTransitionForPagePicture property to control how the PagePicture method should scroll the page. This will affect the way the “sticky” elements appear in the visible areas of the page, which, in its turn, will affect the resulting image that the PagePicture method will capture. If the property is enabled (by default), the PagePicture method will use the CSS transition for scrolling. The “sticky” elements will not remain in the visible area of the page while it is being scrolled. If the property is disabled, the “sticky” elements will remain in the visible area of the page and, therefore, can re-appear on the resulting captured image several times. To learn more, see the PagePicture method description. Known Issue: The CSS transition may not work on pages opened in Internet Explorer or applications that use Chromium Embedded Framework versions prior to 3.2171. For such pages, elements with fixed positions may remain in the visible area of the page when scrolling, and the captured image will have those elements repeated.

  The PagePicture method in TestComplete versions prior to version 12.31 does not use CSS transition. If in your tests created in previous TestComplete versions you have images captured by the PagePicture method, those images might differ from images captured in TestComplete version 12.31 and later. If you use those images for image comparison or region checkpoints, your tests may fail. We recommend that you update your baseline images or disable CSS transition for the PagePicture method in your project.

To call these methods from a keyword test, use the Call Object Method or Run Code Snippet operation.

Both methods return a Picture object that corresponds to the captured image. You can use this object to save the underlying image to a file, compare it with another image, search for a subimage and perform other operations. For more information on comparing an finding images, see Alternatives to Region Checkpoints and Finding an Image Within Another Image.