docs: fix library-js (#18314)

Fixes #18145.

docs/src/library-js.md

@@ -5,17 +5,14 @@ title: "Library"
 
 Playwright Library provides unified APIs for launching and interacting with browsers, while Playwright Test provides all this plus a fully managed end-to-end Test Runner and experience.
 
-Under most circumstances, for end-to-end testing, you'll want to use `@playwright/test` (Playwright Test), and not `playwright` (Playwright Library) directly. To get started with Playwright Test, follow its [Getting Started Guide](./intro.md).
-
-<!-- TOC -->
-- [Release notes](./release-notes.md)
+Under most circumstances, for end-to-end testing, you'll want to use `@playwright/test` (Playwright Test), and not `playwright` (Playwright Library) directly. To get started with Playwright Test, follow the [Getting Started Guide](./intro.md).
 
 ## When Should Playwright Library Be Used Directly?
 
-- creating an integration for a third party test runner (e.g. the third-party runner plugins listed [here](./test-runners.md) are built on top of Playwright Library)
-- automation and scraping
+- Creating an integration for a third party test runner. For example, third-party runner plugins listed [here](./test-runners.md) are built on top of the Playwright Library.
+- Automation and scraping.
 
-## Differences
+## Differences when using library
 
 ### Library Example
 
@@ -23,12 +20,12 @@ The following is an example of using the Playwright Library directly to launch C
 
 
 ```js tab=js-ts
-import playwright, { devices } from 'playwright';
+import { chromium, devices } from 'playwright';
 import assert from 'node:assert';
 
 (async () => {
   // Setup
-  const browser = await playwright.chromium.launch();
+  const browser = await chromium.launch();
   const context = await browser.newContext(devices['iPhone 11']);
   const page = await context.newPage();
 
@@ -46,12 +43,12 @@ import assert from 'node:assert';
 
 ```js tab=js-js
 const assert = require('node:assert');
-const playwright = require('playwright');
+const { chromium, devices } = require('playwright');
 
 (async () => {
   // Setup
-  const browser = await playwright.chromium.launch();
-  const context = await browser.newContext(playwright.devices['iPhone 11']);
+  const browser = await chromium.launch();
+  const context = await browser.newContext(devices['iPhone 11']);
   const page = await context.newPage();
 
   // The actual interesting bit
@@ -66,15 +63,7 @@ const playwright = require('playwright');
 })()
 ```
 
-Run via:
-
-```bash tab=js-ts
-node ./my-script.ts
-```
-
-```bash tab=js-js
-node ./my-script.js
-```
+Run it with `node my-script.js`.
 
 ### Test Example
 
@@ -106,11 +95,7 @@ test('should be titled', async ({ page, context }) => {
 });
 ```
 
-Run via:
-
-```
-npx playwright test
-```
+Run it with `npx playwright test`.
 
 ### Key Differences
 
@@ -118,17 +103,17 @@ The key differences to note are as follows:
 
 | | Library | Test |
 | - | - | - |
-| Installation | `npm install playwright` | `npm init playwright@latest` (note `install` vs. `init`) |
+| Installation | `npm install playwright` | `npm init playwright@latest` - note `install` vs. `init` |
 | Install browsers | Chromium, Firefox, WebKit are installed by default | `npx playwright install` or `npx playwright install chromium` for a single one |
 | `import`/`require` name | `playwright` | `@playwright/test` |
-| Initialization | Explicitly need to: <ol><li>Pick a browser to use (e.g. `chromium`)</li><li>Create `browser` ([`method: BrowserType.launch`])</li><li>Create a `context` ([`method: Browser.newContext`]), <em>and</em> pass any context options explcitly (e.g. `devices['iPhone 11']`</li><li>Create a `page` ([`method: BrowserContext.newPage`])</li></ol> | An isolated `page` and `context` are provided to each test out-of the box (along with any other [built-in fixtures](./test-fixtures.md#built-in-fixtures)). No explicit creation. If referenced by the test in it's arguments, the Test Runner will create them for the test. (i.e. lazy-initialization) |
+| Initialization | Explicitly need to: <ol><li>Pick a browser to use, e.g. `chromium`</li><li>Launch browser with [`method: BrowserType.launch`]</li><li>Create a context with [`method: Browser.newContext`], <em>and</em> pass any context options explcitly, e.g. `devices['iPhone 11']`</li><li>Create a page with [`method: BrowserContext.newPage`]</li></ol> | An isolated `page` and `context` are provided to each test out-of the box, along with other [built-in fixtures](./test-fixtures.md#built-in-fixtures). No explicit creation. If referenced by the test in it's arguments, the Test Runner will create them for the test. (i.e. lazy-initialization) |
 | Assertions | No built-in Web-First Assertions | [Web-First assertions](./test-assertions.md) like: <ul><li>[`method: PageAssertions.toHaveTitle`]</li><li>[`method: PageAssertions.toHaveScreenshot#1`]</li></ul> which auto-wait and retry for the condition to be met.|
-| Cleanup | Explicitly need to: <ol><li>Close `context`  ([`method: BrowserContext.close`])</li><li>Close `browser`  ([`method: Browser.close`])</li></ol> | No explicit close of [built-in fixtures](./test-fixtures.md#built-in-fixtures); the Test Runner will take care of it.
-| Running | When using the Library, you run the code as a node script (possibly with some compilation first). | When using the Test Runner, you use the `npx playwright test` command. Along with your [config](./test-configuration.md)), the Test Runner handles any compilation and choosing what to run and how to run it. |
+| Cleanup | Explicitly need to: <ol><li>Close context with [`method: BrowserContext.close`]</li><li>Close browser with [`method: Browser.close`]</li></ol> | No explicit close of [built-in fixtures](./test-fixtures.md#built-in-fixtures); the Test Runner will take care of it.
+| Running | When using the Library, you run the code as a node script, possibly with some compilation first. | When using the Test Runner, you use the `npx playwright test` command. Along with your [config](./test-configuration.md), the Test Runner handles any compilation and choosing what to run and how to run it. |
 
-In addition to the above, Playwright Test—as a full-featured Test Runner—includes:
+In addition to the above, Playwright Test, as a full-featured Test Runner, includes:
 
-- [Configuration Matrix and Projects](./test-configuration.md): In the above example, in the Playwright Library version, if we wanted to run with a different device or browser, we'd have to modify the script and plumb the information through. With Playwright Test, we can just specify the [matrix of configurations](./test-configuration.md) in one place, and it will create run the one test under each of these configurations. 
+- [Configuration Matrix and Projects](./test-configuration.md): In the above example, in the Playwright Library version, if we wanted to run with a different device or browser, we'd have to modify the script and plumb the information through. With Playwright Test, we can just specify the [matrix of configurations](./test-configuration.md) in one place, and it will create run the one test under each of these configurations.
 - [Parallelization](./test-parallel.md)
 - [Web-First Assertions](./test-assertions.md)
 - [Reporting](./test-reporters.md)