Browser Window
🔗 Original page — Source of this material
Description
The browser window is one of the main elements in ProjectMaker for building website automation templates. Essentially, a browser window is an instance of a browser with additional tools to make your project development easier and faster.
The window consists of top and bottom toolbars and the main viewing area or workspace of the browser. In many ways, the functionality and usage of this window are similar to a regular browser.
Tools
Let's look at all the tools available in the browser window.
Open Tabs Area
The panel (1) displays all browser tabs currently open. By clicking the button on the right side of the panel (2), you can open a list for quick navigation among the tabs.
You can create, activate, and close tabs via the action ❗→ Manage Browser Tab
“Back” Button
This is used to navigate back through your browsing history and returns you to the previous page. You can achieve the same with code:
C#: instance.ActiveTab.GoBack();
JS: history.back();
“Refresh” Button
Reloads the current page. While the page is loading, the icon changes to a cross; clicking it can stop the loading process.
Address Bar
A field for entering, editing, and displaying the page URL. It works just like the address bar in regular browsers.
Go to Page
Confirms navigation to the URL entered in the address bar. The same thing happens if you simply press ENTER.
The main way to open a link in the browser is using the action ❗→ Go To Page (Open Page/Navigate)
Open a New Tab
Opens a modal window where you can enter the name of the new tab. You can do the same with the "cube" ❗→ Manage Browser Tab
Input Mode
Switches the input mode between “mouse” and “touch.” It mainly serves one purpose: in “touch” mode, when recording is enabled, blocks with ❗→ touch events are created, and vice versa.
Extensions
Allows you to interact with installed extensions (Activate, Settings, Details, Remove). You can also install new extensions via crx files.
You can read more about working with extensions in the article ❗→ Working with Extensions
Web Developer Tools
Opens the ❗→ Web Developer Tools window similar to the one in Chrome. This is used for advanced work with the DOM, applications, and page traffic.
This window opens for the currently active tab!
View Page Source
❗→ Opens the page source window, showing the DOM and page text for the active tab. You can also get the DOM, page source, and text via project environment variables:
{ -Page.Dom- }
{ -Page.Source- }
{ -Page.Text- }
Clear Cache
Provides quick access to functionality similar to the corresponding "cube"—it clears all browser cache. You can also clear cache using the action ❗→ Clear Cache.
Clear Cookies
Provides quick access to the same functionality as the corresponding cube—it clears all instance cookies. You can also perform this using the action ❗→ Clear Cookies.
In ZennoPoster 7.3.1.0, a new action was added for working with cookies, which allows you not only to clear, but also to load and save cookies in various formats.
Page Loading Status Indicator
It has three states:
- Ready – when fully loaded;
- Loading – while loading;
- Finishing Up – loading data with scripts and plugins.
Current Browser Type
Shows the browser type set for the instance.
You can change the browser type in several ways:
- globally, for all new projects through ❗→ program settings;
- in the ❗→ current project settings;
- via the action ❗→ Browser=>Settings=>Start Instance you can change the browser type while running a project.
Browser Proxy
Shows the current proxy.
Starting from version 7.3.2.0, you can also set the proxy by simply clicking this button.
You can also set a proxy via ❗→ Profile Window, or with the “Browser“ cube → “Settings“ → “❗→ Set Proxy“.
Content Loading Rules
Opens a dropdown list where you can use checkboxes to allow/deny certain types of content to load. You can do the same via the “Project Settings” button → “❗→ Browser ” or with cubes: “Add Action” → “Browser” → “Settings” → “❗→ Images”/“Media”/“Ads”/“Style Loading”/“JavaScript”/“Popup Blocker”
For example, you can disable images and CSS styles for faster resource loading.
Set Timeout
Opens a window where you can set the time in seconds for ZennoPoster to wait for the active tab to fully load. You can also set a timeout using the action “Add Action” → “Tab” → “❗→ Settings”
Mouse Cursor Coordinates
Shows the X and Y mouse coordinates in pixels. The coordinates (0;0) are at the top left of the workspace. This helps you quickly determine the location of HTML elements on the page.
Context Menu
Unlike other browsers, the browser in ProjectMaker has a completely different context menu, which you can open by right-clicking in the browser workspace.
Set Value from Profile (Variable)
These options appear when you open the context menu on a text field. They let you quickly paste text from the ❗→ profile or from a ❗→ project variable.
Inspect Element
This opens the ❗→ element tree window and the ❗→ element properties window. There, you can study the document structure and the parameters of the selected HTML element in detail. Afterwards, you can move it to the ❗→ action builder to perform actions like (❗→ click, ❗→ set value, ❗→ get value).
Follow Cursor
When you select “Follow Cursor” mode and move your mouse over the page, an outline will appear around HTML elements (if this ❗→ is not disabled in the program settings). And you can check their properties live in the ❗→ relevant window.
To Action Builder
❗→ Action Builder and XPath Search
XPath Search
This opens the ❗→ action builder with search mode enabled for finding HTML elements using ❗→ XPath.
Parse Data
This is a Captcha!
This menu item appears when you open the context menu for an image. This element is marked as a captcha, and the corresponding ❗→ action is placed onto the action canvas.
Works only with simple text captchas!
Create Check for Selected Text
Starting with version 7.3.1.0 and above – ❗→ Check for Text Presence
Up to version 7.3.1.0 – ❗→ Create Check for Selected Text