LogoLogo
BugBug HomepageContact SupportLoginSign up free
  • Documentation
  • Tutorial for beginners
  • Best practices
  • BugBug App FAQ
  • Quick Start
    • What is test automation?
    • Start for free
    • Create your first project
    • Install Chrome extension
    • Create and run the tests
  • Creating Tests
    • Your first test
    • Independent tests
    • Duplicating tests
    • New test from here
  • Recording tests steps
    • BugBug overlay
    • Recording clicks
    • Recording hover
    • Recording keyboard typing
    • Recording assertions
    • Recording drag & drop
    • Record from here
    • Re-recording steps
    • Recording pop-up window actions
    • Using keyboard shortcuts
  • Editing tests
    • Grouping steps
    • Components
    • Manually editing steps
    • Actions
    • Assertions
    • Tabs & iframes
    • Variables
    • Local variables
    • Profiles
    • Custom JavaScript actions
  • Running tests
    • Running the tests
    • Statuses
    • Run (locally)
    • Run and pause here
    • Run in cloud
    • Schedules
    • Parallel runs
    • Running via API
    • Test your local build or protected web page using ngrok
  • Preventing failed tests
    • Waiting conditions
    • Smart click
    • Smart scroll
    • Selectors
    • Timeout
    • Delay / Sleep
    • Project settings
  • Debugging Tests
    • Runs history
    • Screenshots
    • Debug in Chrome
    • Breakpoint (run step-by-step)
  • Organizing tests
    • Naming your tests
    • Searching tests
    • Suites
    • Components
    • Projects
  • Workflow Tips
    • Edit & Rewind
    • Changing the test screen size
    • Multiple environments
    • Testing registration & login
    • Integrating with build systems
    • Mobile version testing
  • Collaboration
    • Organizations
    • Inviting team members
    • Alerts
      • Sending email notification
      • Sending webhook
      • Sending Slack message
      • Sending Teams message
  • Integrations
    • CLI
    • Zapier
    • Slack
    • GitHub
    • Bitbucket
    • Gitlab
    • Trello
    • Jira
  • Your account
    • Account settings
    • Edit your name and email
    • Forgot password
    • Manage Subscriptions
    • Account FAQ
  • Troubleshooting
    • Prohibited behaviors
    • Updating Chrome extension
    • Clear cookies and site data for BugBug
    • Testing basic auth password protected websites
    • Common selectors issues
    • CAPTCHA in automation testing
    • Cloud tests sometimes failing
    • IPs list of cloud runners
    • VPN or a Firewall
    • A/B tests
    • Report a bug
  • IN-DEPTH GUIDES
    • Beginners tutorial to automation testing
    • XPath Selectors without coding
    • Tech Leader's Guide to Automation Testing
    • Test automation guides
  • FREE TOOLS
    • BugBug Testing Inbox
    • Example SaaS App
    • No-code XPath Selector Builder
  • Other links
    • BugBug Homepage
    • Pricing
    • Terms & conditions
    • Privacy Policy
Powered by GitBook
On this page
  • What is a mobile version / RWD?
  • When to test more than one screen width?
  • How to create tests for different screen resolutions?

Was this helpful?

  1. Workflow Tips

Mobile version testing

PreviousIntegrating with build systemsNextOrganizations

Last updated 1 year ago

Was this helpful?

What is a mobile version / RWD?

Your website may behave differently when opened on smaller screens, such as a smartphone or a tablet. This behavior is called Responsive Web Design (RWD) or simply a mobile version of your website - your website is designed in a way that adapts to different screen widths.

When to test more than one screen width?

If your app is very similar on mobile and desktop, there's no need to create separate mobile tests - it will just double your work without much value added. We recommend that you focus on one screen resolution - the one that has the most users. You can still create 5 - 10 additional tests for different resolutions, but focus on the major differences between the mobile and desktop versions - just check if these specific core differences work correctly.

If your app has many differences between mobile and desktop, for example very different navigation and user journeys, it makes sense to develop tests for mobile and desktop in parallel, as completely independent projects.

How to create tests for different screen resolutions?

The easiest way to test the mobile version (responsive web design / RWD) is to have 2 different projects: one for desktop tests and one for mobile tests. Set a different window width per project in its .

We recommend doing this in the following way:

  1. Create all the important desktop tests

  2. Duplicate the project

  3. Rename the new project and add - Mobile suffix to the project name

  4. Change the screen size to "Mobile" in the project settings

  5. Adapt the tests to the mobile version via .

Tip! You can .

project settings
re-recording test steps
ask support to move the tests between projects or accounts
Duplicate the project and change its name
You can choose a mobile option when creating a new test
or change to mobile screen size in test settings.
When You copy an existing test
Run tests with smaller mobilewindow width