DEV Community

Cover image for Cross-device Testing of Web Applications with Blisk
Andrew Malrowe
Andrew Malrowe

Posted on • Originally published at geeksforgeeks.org

1 1

Cross-device Testing of Web Applications with Blisk

This article will educate you all about Blisk (https://blisk.io). Blisk is a Chromium-based web browser that improves productivity and code quality by providing a wide array of tools for web development and testing. The main feature of this application is that it offers virtual mobiles, tablets, laptops, and desktops for web development and testing purposes.

Blisk offers two types of licenses: free license with daily limited usage and paid license with unlimited usage. After installing Blisk you get two weeks of free unlimited testing.

In this tutorial, we will work with the GeeksforGeeks website as an example. You can use your own website at any stage: localhost/staging/production.

Step-by-step guide:

Step 1:

Install Blisk application — Blisk is available for Windows, macOS, and Linux (Ubuntu, Debian, Fedora, OpenSUSE). Download Blisk from the official website: https://blisk.io and install it.
Download Blisk

Step 2:

Create a Blisk account — Creating an account is optional but recommended. Blisk account allows using extra features (screenshots and screen recorder, cloud storage) and adds an extra week of the unlimited usage of all features for free.
Create Blisk account

Step 3:

Open a website that you will work with

  1. Paste a Url https://www.geeksforgeeks.org/ into the address bar and navigate to this website.
  2. Click the button Toggle Developer Mode (see screenshot below). Launch Developer Mode in Blisk

Step 4:

Select the devices - Blisk launches Device Manager where you can select the devices. You can select different types of devices: mobiles, tablets, laptops, and desktops. In addition, Blisk offers a Chrome-like view that represents a regular web view, just like any tab in your browser. Depending on your needs, you can mix different devices to use them simultaneously.

In this tutorial, we will select iPhone 12 Mini and Chrome-like view to check how GeekforGeeks works in regular browsers compared to mobile. Click the button Launch Devices when your device set is ready.
Launch Devices in Blisk

Step 5:

Browse in Developer Mode - Blisk launches the device set with previously selected devices, and now we can perform checks on mobile and desktop simultaneously. Let’s scroll down and browse across the GeekforGeeks website. You will notice that scrolls are synced from mobile to desktop which helps to browse faster and compare two views visually.
Next, let’s open any article to check how it behaves. When navigating to any URL, you will notice that the device and desktop follow each other by URL.

Step 6:

Perform checks - Now, you can check whatever you need. In addition, you can:

  • Test portrait vs landscape orientation.
  • Check JavaScript errors that appear in each device.
  • Simulate slow connection.
  • Use DevTools for each device independently.
  • Switch to another device.
  • Check dark theme.
  • Take screenshots of issues.
  • Record a video with the steps to reproduce the issue.
  • Save screenshots and videos to the cloud storage.

Conclusion:

This application was created for web developers and QA engineers. You can use Blisk in your daily work to create web applications and test them across multiple devices simultaneously to speed up your productivity and deliver high-quality products to your customers faster than before.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
sivakrishna739 profile image
Siva Krishna

As omnichannel presence becomes a given for many customers, compatibility testing of any mobile app across devices become imperative for ensuring seamless experience. bit.ly/3HjNXqY

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay