Provide working example of PW test code of a web app that can be run on a browser of a real mobile device

[craitose]

🚀 Feature Proposal

A clear and concise description of what the feature is.
There is claim of supporting Playwright but not Playwright tests on a mobile device. Currently the only support is Windows OS/Mac OS but I imagine as playwright supports mobile viewports in which it runs web apps in virtual browsers. It should not be too difficult to provide capabilities to run these mobile viewports tests in the browsers of real devices. As the tests are testing a web app and not an application, the use of Appium and XCUI libraries should not be needed.
If this is currently possible , please add it the repo and docs as a example.

Motivation

Allow users to test web-app behavior on real devices using existing playwright code.

Example

config code:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'SauceLab iOS Safari',
      use: {
        browserName: 'webkit', // Safari runs on WebKit
        viewport: { width: 375, height: 667 }, // iPhone dimensions
        browserstack: {
          os: 'ios',
          os_version: '14', // Specify iOS version
          device: 'iPhone 12', // Specify device
        },
      },
    },
  ],
});

test code:

import { chromium } from 'playwright';

(async () => {
    const browser = await chromium.connect({
        wsEndpoint: 'wss://your-cloud-service-url.com/playwright-session',
        headers: {
            'x-access-key': 'your-access-key',
        },
    });

    const context = await browser.newContext();
    const page = await context.newPage();

    await page.goto('https://your-web-app.com');
    console.log(await page.title());
    await browser.close();
})();

test execution:

npx playwright test --project="SauceLab iOS Safari"