How to Switch from Mobile Sites to Desktop Sites in Chrome?

Product Forums Katalon Studio
1

Hello everyone, I’m Darshan Hiranandani, need help with switching from mobile sites to desktop versions in Chrome. I’ve already tried a few methods like adjusting the viewport, using JavaScript to change the user agent, and appending “?view=desktop” to the URL, but nothing seems to work. I’d like to find a solution without clicking specific elements or using tricks like that. Is there any way to adjust settings directly through ‘chrome://settings’ or another method you suggest? Please share your thoughts and suggestions! Thank you!

Regards
Darshan Hiranandani

1 Like
2

What do you mean by the words: “mobile site” and “desktop version”? Please elaborate them, as I have no idea what.

3

Hi @darshanhiranandani23,

Welcome to our community. Thank you for sharing your issue.

Doing some research, I recommend that:
You can automate the process of switching between mobile and desktop views using KS as follows:

  1. Change the User-Agent Using Katalon
    You can set a custom user-agent to mimic a desktop browser when making requests or opening web pages. Example:
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import org.openqa.selenium.WebDriver
import org.openqa.selenium.chrome.ChromeDriver
import org.openqa.selenium.chrome.ChromeOptions

// Set up ChromeOptions with a desktop user-agent
ChromeOptions options = new ChromeOptions()
options.addArguments("--user-agent=Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36")

// Start WebDriver with the options
WebDriver driver = new ChromeDriver(options)

// Open the desired URL in desktop view
driver.get('https://example.com')

// Use Katalon WebDriver to interact
WebUI.openBrowser('')
WebUI.switchToWindowIndex(0)

This will force the browser to load the desktop version by changing the user-agent.

  1. Set Viewport to Desktop Dimensions
    If the website is relying on screen dimensions instead of user-agent detection, adjust the browser window size to mimic a desktop environment using setViewPortSize()
    This approach ensures the browser renders the desktop version based on screen dimensions.

  2. Append Query Parameters in Tests
    Some websites use query parameters like ?view=desktop to switch views, using WebUI.navigateToUrl(url + '?view=desktop')

  3. Verify Desktop View
    You can verify whether the view is correct by checking specific elements unique to the desktop layout:

boolean isDesktopView = WebUI.verifyElementPresent(findTestObject('Page_DesktopSpecificElement'), 5)
if (isDesktopView) {
    println 'Desktop view successfully loaded!'
} else {
    println 'Failed to load desktop view.'
}

Hope this can help you. Let us know your trial

4

did it work @darshanhiranandani23

5

Hello Darshan Hiranandani, I understand your frustration with switching from mobile to desktop versions in Chrome. As someone experienced in mobile application development, I can suggest a few additional approaches. While the methods you’ve tried are common, there are other options to explore. One possibility is to use a browser extension specifically designed for user agent switching, which can be more reliable than JavaScript-based solutions. Another approach is to modify Chrome’s flags by navigating to ‘chrome://flags’ and searching for “Request desktop site” to enable this feature globally. Additionally, you might consider using Chrome’s Developer Tools to emulate different devices and screen sizes, which can be accessed through the browser’s menu or by pressing Ctrl+Shift+I (or Cmd+Option+I on Mac). These methods should provide a more consistent experience across various websites without relying on site-specific elements or URL modifications. If these solutions don’t work, it might be worth investigating if your Chrome installation has any conflicting settings or extensions that could be interfering with the desktop view functionality.

6

HI @darshanhiranandani23, :wave:

Just checking in to see if you were able to resolve your issue with any of the suggestions in this thread or not.

If yes, then could you mark one reply as a solution :white_check_mark: so that other members can refer to it in the future?

If not yet, then please follow up with the other members in this thread.

Thanks,
Albert

7

can you confirm and share your solution @darshanhiranandani23