Update examples (#11267)

Co-authored-by: Marcus Felling <MarcusFelling@users.noreply.github.com>

README.md

@@ -42,59 +42,47 @@ Playwright is built to automate the broad and growing set of web browser capabil
 
 #### Page screenshot
 
-This code snippet navigates to whatsmyuseragent.org in Chromium, Firefox and WebKit, and saves 3 screenshots.
+This code snippet navigates to whatsmyuseragent.org and saves a screenshot.
 
-```js
+```TypeScript
-const playwright = require('playwright');
+import { test } from '@playwright/test';
 
-(async () => {
+test('Page Screenshot', async ({ page }) => {
-  for (const browserType of [playwright.chromium, playwright.firefox, playwright.webkit]) {
-    const browser = await browserType.launch();
-    const context = await browser.newContext();
-    const page = await context.newPage();
     await page.goto('http://whatsmyuseragent.org/');
-    await page.screenshot({ path: `example-${browserType.name()}.png` });
+    await page.screenshot({ path: `example.png` });
-    await browser.close();
+});
-  }
-})();
 ```
 
 #### Mobile and geolocation
 
 This snippet emulates Mobile Safari on a device at a given geolocation, navigates to maps.google.com, performs action and takes a screenshot.
 
-```js
+```TypeScript
-const { webkit, devices } = require('playwright');
+import { test, devices } from '@playwright/test';
-const iPhone11 = devices['iPhone 11 Pro'];
 
-(async () => {
+test.use({
-  const browser = await webkit.launch();
+  ...devices['iPhone 13 Pro'],
-  const context = await browser.newContext({
+  locale: 'en-US',
-    ...iPhone11,
+  geolocation: { longitude: 12.492507, latitude: 41.889938 },
-    locale: 'en-US',
+  permissions: ['geolocation'],
-    geolocation: { longitude: 12.492507, latitude: 41.889938 },
+})
-    permissions: ['geolocation']
+
-  });
+test('Mobile and geolocation', async ({ page }) => {
-  const page = await context.newPage();
   await page.goto('https://maps.google.com');
-  await page.click('text="Your location"');
+  await page.locator('text="Your location"').click();
   await page.waitForRequest(/.*preview\/pwa/);
   await page.screenshot({ path: 'colosseum-iphone.png' });
-  await browser.close();
+});
-})();
 ```
 
 #### Evaluate in browser context
 
-This code snippet navigates to example.com in Firefox, and executes a script in the page context.
+This code snippet navigates to example.com, and executes a script in the page context.
 
-```js
+```TypeScript
-const { firefox } = require('playwright');
+import { test } from '@playwright/test';
 
-(async () => {
+test('Evaluate in browser context', async ({ page }) => {
-  const browser = await firefox.launch();
-  const context = await browser.newContext();
-  const page = await context.newPage();
   await page.goto('https://www.example.com/');
   const dimensions = await page.evaluate(() => {
     return {
@@ -104,32 +92,24 @@ const { firefox } = require('playwright');
     }
   });
   console.log(dimensions);
-
+});
-  await browser.close();
-})();
 ```
 
 #### Intercept network requests
 
-This code snippet sets up request routing for a WebKit page to log all network requests.
+This code snippet sets up request routing for a page to log all network requests.
 
-```js
+```TypeScript
-const { webkit } = require('playwright');
+import { test } from '@playwright/test';
-
-(async () => {
-  const browser = await webkit.launch();
-  const context = await browser.newContext();
-  const page = await context.newPage();
 
+test('Intercept network requests', async ({ page }) => {
   // Log and continue all network requests
   await page.route('**', route => {
     console.log(route.request().url());
     route.continue();
   });
-
   await page.goto('http://todomvc.com');
-  await browser.close();
+});
-})();
 ```
 
 ## Resources