Block reference / Web interaction
Emulate
Show the current tab at the size of a phone or tablet, like the device toolbar in DevTools.
Only in
WarpX Browser
Emulate makes the tab the workflow is using behave like a phone or tablet screen: its width and height, pixel ratio, touch and orientation change, the way they do in DevTools' device toolbar. Use it to check or capture a site's mobile layout from a desktop profile. The setting holds for that tab until an Emulate block set to Back to normal runs, or the tab closes.
Settings
- Description
A note shown on the block in the canvas. It does not change what the block does.
ExamplePhone layout- Emulate a device / Back to normal
The two choices at the top. Emulate a device applies the device below. Back to normal returns the tab to the window's own size, without touch.
ExampleEmulate a device- Devicewhen Emulate a device / Back to normal is Emulate a device
The sizes DevTools offers, under Phones (iPhone SE, XR, 12 Pro and 14 Pro Max, Pixel 7, several Samsung Galaxy models, Surface Duo) and Tablets and others (iPad Mini, Air and Pro, Surface Pro 7, Asus Zenbook Fold, Nest Hub and Nest Hub Max). Each shows its width and height in CSS pixels. Custom size lets you type your own.
ExampleiPhone 14 Pro Max · 430×932- Widthwhen Device is Custom size
The screen width in CSS pixels, in portrait.
Example390- Heightwhen Device is Custom size
The screen height in CSS pixels, in portrait.
Example844- Pixel ratiowhen Device is Custom size
Device pixels per CSS pixel:
3for a recent iPhone,1for an ordinary desktop screen.Example3- Mobile layout (meta viewport, no scrollbars)when Device is Custom size
Lays the page out the way a phone does: it honours the page's viewport meta tag and hides scrollbars. The listed devices always have it on.
ExampleChecked- Touch eventswhen Device is Custom size
Tells the page the screen is a touch screen. The listed devices always have it on.
ExampleChecked- Orientationwhen Emulate a device / Back to normal is Emulate a device
Portrait or Landscape. Landscape swaps the width and height.
ExamplePortrait
Every block also has the shared block settings — a description, Disable block and what to do on an error. Fields that take text accept data from earlier blocks.
What it hands on
Leaves by its only output and hands on the size it set, { width, height, scale }, as {{prevBlockData}}. The log line reads like iPhone 14 Pro Max · 430×932 @3x.
Example: Screenshot a page's phone layout on iPhone 14 Pro Max
- Start
- New tab
- Emulate
- Reload tab
- Take screenshot
- Emulate
- Add a New tab block with New tab URL
https://shop.example.com/product/123. - Add an Emulate block, keep Emulate a device, choose iPhone 14 Pro Max · 430×932 and Portrait.
- Add a Reload tab block, so scripts that read the screen size when the page loads see the phone's.
- Add a Take screenshot block to capture the phone layout.
- Add a second Emulate block set to Back to normal, so the blocks after it see the desktop page again.
Good to know
- The user agent is not changed. In an anti-detect profile it is part of a fingerprint that must agree with itself, and a phone's user agent over a desktop's platform and graphics card is the kind of mismatch detection looks for. A site that picks its mobile version from the user agent on the server keeps serving the desktop version; one that uses CSS media queries switches at once.
- It applies to the tab the workflow is working in at that moment. Another tab, or a new one, opens at the window's size.
- It needs an open tab. Without one the block fails.
- A custom size of
0or less fails with "Width and height must be numbers above 0".
See also
- Take screenshot — Captures the visible page, the whole page or one element as an image, and saves it as a file, in the table or in a variable.
- Reload tab — Reloads the page in the tab the workflow is using and waits for it to load.
- Human actions — Scroll, move the mouse and pause for a random while, the way a person reading the page would.