Pictures, screenshots and the collage

Take a screenshot, capture a frame, rename your pictures, and lay a picture over the screen to prepare a check.

Where pictures come from

A test usually starts from a recording, but pictures are just as useful: an element the recording never showed, a screen that does not exist yet, a moment worth keeping.Every picture of a test lives in Content Files, and travels inside the test file.

To get	Use
A picture file you already have	Import Media..., at the top of Content Files
Something on your screen right now	Take Screenshot...
A moment of the recording	Capture Frame
A whole design, with its checks	Import a design from Figma

Take a screenshot

A screenshot takes any part of your screen into the test: a dialog the recording missed, a prototype in your browser, the app in another theme.

1
Click Take Screenshot
In GUI Test Studio's toolbar, in the Timeline menu, or with Ctrl+Shift+P.GUI Test Studio steps aside and leaves a small bar on top of your screen.
2
Get the screen ready
Take your time: open the window, the menu or the page you want.Drag the bar away if it covers something.Neither the bar nor GUI Test Studio is ever in the picture.
3
Capture a part, or everything
Click Capture a Region... and drag a rectangle around what you want, or click Whole Screen.
4
Name it and keep it
GUI Test Studio comes back with the picture.Give it a name and click Save to Content Files, or click Retake to try again.

Capture a frame

Capture Frame keeps the moment under the playhead as a picture.Move the playhead to the moment you want, then click Capture Frame in the timeline's toolbar or in any right-click menu of the timeline.The button lights up only while the playhead stands on the recording.

The picture is added to Content Files and placed on the timeline at that moment, as a clip of five seconds.One Undo takes the clip back.

Captured frames placed as clips on the Visual Reference track — Captured frames become clips: stretch one to give yourself room for more checks on that screen.

ExampleThree checks on a screen that flashes by

A confirmation appears for one second in your recording.Capture that frame and stretch its clip: you now have a still screen to build a text check, a visual check and a layout check on, at your own pace.

Rename and find pictures

Right-click a picture or a recording in Content Files and choose Rename..., or press F2.Call it what it shows, such as "Checkout button".The name is saved with the test.

When a test holds many files, type in the search field at the top of Content Files, or pick a kind in the list beside it: videos, images, designs or tests.

Content Files with a search typed and one design found

Put a picture over the screen

A picture does not have to replace the screen.Put it over the recording and the preview shows both, like a collage: the app as recorded, with a new button, badge or dialog laid on it.It is the quickest way to prepare a check for something that is not built yet.

Do this	And the picture lands
Drag it from Content Files onto the preview	At the playhead's moment, where you drop it, at its own size.
Drag it onto a clip of the timeline	Above that clip, at that moment.A track is added when there is no room.
Drag it onto an empty stretch of the Visual Reference track	There, as the screen itself: alone at a moment, a picture fills the preview.

Move, resize and turn it

Click a picture in the preview to select it.It keeps its handles until you click something else.

To	Do this
Move it	Drag the picture itself.
Resize it	Drag a corner.The picture keeps its proportions.
Turn it	Drag the round handle above it.
Go back	Right-click it and choose Original Size or No Rotation.
Look closer	Turn the mouse wheel over the preview to zoom, and drag an empty spot to move around.

While you drag, the picture snaps to the edges and the middle of the frame and of the other pictures, and a guide line shows what it is lined up with.Hold Alt to move freely, or turn Snap Pictures off in the right-click menu.

Pictures in the check editors

Every check editor has a Pictures tray beside the frame, with the pictures of the test.Drag one onto the frame, or double-click it.There you can move, resize and turn it exactly as in the preview.

The Group Assert Editor with its Pictures tray on the left and a picture placed on the frame as a member — The Group Assert Editor: a picture dragged from the tray becomes a member of the group.

In this editor	A picture you drop
Visual Target Editor	Becomes the visual target: the check looks for that picture.
Group Assert Editor	Is placed on the frame and becomes a visual member of the group.
Text Assert Editor	Is placed on the frame, so you can mark the words it holds.
Layout Assert Editor	Is placed on the frame, so its elements can be detected with the rest.

A picture placed in an editor shows in the preview too, at that moment of the test.The editor's Undo takes it back, and Cancel takes back every picture placed since the editor opened.

Next: Test a feature before it exists puts all of this together.

Still stuck?Tell us what you were trying to do, and we answer within one working day.Ask our team

PreviousTest a feature before it exists Next Import a design from Figma