Merge pull request #789 from grafana/docs/582-xk6-browser

Update xk6-browser docs for release v0.5.0

gatsby-node.js

@@ -1479,6 +1479,8 @@ const createRedirects = ({ actions }) => {
       '/javascript-api/xk6-browser/jshandle/',
     '/javascript-api/k6-x-browser/keyboard/':
       '/javascript-api/xk6-browser/keyboard/',
+    '/javascript-api/k6-x-browser/locator/':
+      '/javascript-api/xk6-browser/locator/',
     '/javascript-api/k6-x-browser/mouse/': '/javascript-api/xk6-browser/mouse/',
     '/javascript-api/k6-x-browser/page/': '/javascript-api/xk6-browser/page/',
     '/javascript-api/k6-x-browser/request/':
@@ -1487,8 +1489,6 @@ const createRedirects = ({ actions }) => {
       '/javascript-api/xk6-browser/response/',
     '/javascript-api/k6-x-browser/touchscreen/':
       '/javascript-api/xk6-browser/touchscreen/',
-    '/javascript-api/k6-x-browser/launcher/':
-      '/javascript-api/xk6-browser/launcher/',
     ...newJavascriptURLsRedirects,
   };
 

src/components/shared/browser-class-list/browser-class-list.view.js

@@ -32,6 +32,10 @@ const links = [
     title: 'Keyboard',
     url: '/javascript-api/xk6-browser/keyboard',
   },
+  {
+    title: 'Locator',
+    url: '/javascript-api/xk6-browser/locator',
+  },
   {
     title: 'Mouse',
     url: '/javascript-api/xk6-browser/mouse/',

src/components/shared/browser-docs-wip/browser-docs-wip.view.js

@@ -0,0 +1,12 @@
+import Blockquote from 'components/shared/blockquote';
+import React from 'react';
+
+const BrowserDocsWIP = () => (
+  <Blockquote mod="warning">
+    <p>
+      This documentation is a work in progress, and some of the functionality
+      that is listed below may not behave as expected.
+    </p>
+  </Blockquote>
+);
+export default BrowserDocsWIP;

src/components/shared/browser-docs-wip/index.js

@@ -0,0 +1,3 @@
+import BrowserDocsWIP from './browser-docs-wip.view';
+
+export default BrowserDocsWIP;

src/components/shared/table-wrapper/table-wrapper.module.scss

@@ -1,15 +1,13 @@
 .table-wrapper {
   width: 100%;
   overflow: auto;
-  table {
-    td:nth-child(1) {
-      white-space: nowrap;
-    }
-    @include sm-down {
-      tr td:nth-of-type(3) {
-        width: 100%;
-        min-width: 230px; //usually 3rd column contains text which is being squished
-      }
+  td:nth-child(1) {
+    white-space: nowrap;
+  }
+  @include sm-down {
+    tr td:nth-of-type(3) {
+      width: 100%;
+      min-width: 230px; //usually 3rd column contains text which is being squished
     }
   }
 }

src/components/templates/doc-page/doc-page-content/doc-page-content.view.js

@@ -4,7 +4,7 @@ import Glossary from 'components/pages/doc-page/glossary';
 import TableOfContents from 'components/pages/doc-page/table-of-contents';
 import Blockquote from 'components/shared/blockquote';
 import BrowserClassList from 'components/shared/browser-class-list';
-import BrowserCompatibility from 'components/shared/browser-compatibility';
+import BrowserDocsWIP from 'components/shared/browser-docs-wip';
 import BrowserWIP from 'components/shared/browser-wip';
 import { Code, CodeInline, CodeGroup } from 'components/shared/code';
 import Collapsible from 'components/shared/collapsible';
@@ -34,7 +34,7 @@ const componentsForNativeReplacement = {
   CodeGroup,
   Collapsible,
   CodeInline,
-  BrowserCompatibility,
+  BrowserDocsWIP,
   BrowserClassList,
   BrowserWIP,
   InstallationInstructions,

src/data/markdown/docs/02 javascript api/alternative main modules/30 k6-x-browser.md

@@ -16,6 +16,7 @@ Here's a list of the fully (✅) or partially (🚧) implemented classes of the
 - 🚧  [Frame](/javascript-api/xk6-browser/frame/)
 - ✅  [JSHandle](/javascript-api/xk6-browser/jshandle)
 - ✅  [Keyboard](/javascript-api/xk6-browser/keyboard)
+- 🚧  [Locator](/javascript-api/xk6-browser/locator/)
 - ✅  [Mouse](/javascript-api/xk6-browser/mouse/)
 - 🚧  [Page](/javascript-api/xk6-browser/page/)
 - 🚧  [Request](/javascript-api/xk6-browser/request/)

src/data/markdown/docs/30 xk6-browser/01 xk6-browser/01 Browser.md

@@ -0,0 +1,35 @@
+---
+title: "Browser"
+excerpt: "xk6-browser: Browser Class"
+---
+
+The `Browser` class is the entry point for all your tests, and it is what interacts with the actual web browser via [Chrome DevTools Protocol](https://chromedevtools.github.io/devtools-protocol/) (CDP). It manages:
+- [BrowserContext](/javascript-api/xk6-browser/browsercontext/) which is where you can set a variety of attributes to control the behavior of pages;
+- and [Page](/javascript-api/xk6-browser/page/) which is where your rendered site is displayed.
+
+A new Browser instance (hence a new browser process) can be created using the `launch()` method of the `chromium` module from `'k6/x/browser'`.
+
+| Method                                                                                    | Description                                                                                                                                           |
+|-------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
+| [browser.close()](/javascript-api/xk6-browser/browser/close)                              | Closes the browser and all of its pages (if any were opened).                                                                                         |
+| [browser.contexts()](/javascript-api/xk6-browser/browser/contexts)                        | Allows you to access all open [BrowserContext](/javascript-api/xk6-browser/browsercontext/)s.                                                        |
+| [browser.isConnected](/javascript-api/xk6-browser/browser/isconnected) <BWIPT id="453"/>  | Indicates whether the [CDP](https://chromedevtools.github.io/devtools-protocol/) connection to the browser process is active or not.                  |
+| [browser.newContext([options])](/javascript-api/xk6-browser/browser/newcontext/) <BWIPT id="455"/> | Creates and returns a new [BrowserContext](/javascript-api/xk6-browser/browsercontext/).                                                             |
+| [browser.newPage([options])](/javascript-api/xk6-browser/browser/newpage)  <BWIPT id="455"/>       | Creates a new [Page](/javascript-api/xk6-browser/page/) in a new [BrowserContext](/javascript-api/xk6-browser/browsercontext/) and returns the page. |
+| [browser.on('disconnected')](/javascript-api/xk6-browser/browser/on) | Detects the disconnected event from the browser application. |
+| [browser.version()](/javascript-api/xk6-browser/browser/version)                          | Returns the browser application's version.                                                                                                            |
+
+### Example
+
+```javascript
+import { chromium } from 'k6/x/browser';
+
+export default function () {
+  const browser = chromium.launch();
+  const context = browser.newContext();
+  const page = context.newPage();
+  const res = page.goto('https://test.k6.io/');
+  page.close();
+  browser.close();
+}
+```

src/data/markdown/docs/30 xk6-browser/01 xk6-browser/01 Browser/close.md

@@ -0,0 +1,28 @@
+---
+title: 'close()'
+excerpt: 'xk6-browser: Browser.close method'
+---
+
+Closes the browser and all of its pages (if any were opened).
+
+The [Browser](/javascript-api/xk6-browser/browser/) object cannot be used anymore and is considered disposed of.
+
+
+### Example
+
+<CodeGroup labels={[]}>
+
+```javascript
+import { chromium } from 'k6/x/browser';
+
+export default function () {
+  const browser = chromium.launch();
+  const context = browser.newContext();
+  context.newPage();
+
+  context.close();
+  browser.close();
+}
+```
+
+</CodeGroup>

src/data/markdown/docs/30 xk6-browser/01 xk6-browser/01 Browser/contexts.md

@@ -0,0 +1,32 @@
+---
+title: 'contexts()'
+excerpt: 'xk6-browser: Browser.contexts method'
+---
+
+Allows you to access all open [BrowserContext](/javascript-api/xk6-browser/browsercontext/)s.
+
+### Returns
+
+| Type  | Description                                                                    |
+| ----- | ------------------------------------------------------------------------------ |
+| Array | Array of [BrowserContext](/javascript-api/xk6-browser/browsercontext/) objects |
+
+
+### Example
+
+<!-- eslint-skip -->
+
+```javascript
+import { chromium } from 'k6/x/browser';
+
+export default function () {
+  const browser = chromium.launch();
+  console.log(browser.contexts().length); // 0
+
+  const context = browser.newContext();
+console.log(browser.contexts().length); // 1
+
+  context.close();
+  browser.close();
+}
+```

src/data/markdown/docs/30 xk6-browser/01 xk6-browser/01 Browser/isconnected.md

@@ -0,0 +1,37 @@
+---
+title: 'isConnected()'
+excerpt: 'xk6-browser: Browser.isConnected method'
+---
+
+<Blockquote mod="warning">
+
+There is a known issue with this feature. See [issue #453](/~https://github.com/grafana/xk6-browser/issues/453) for details.
+
+</Blockquote>
+
+Indicates whether the [CDP](https://chromedevtools.github.io/devtools-protocol/) connection to the browser process is active or not.
+
+### Returns
+
+| Type    | Description                                                                                    |
+| ------- | ---------------------------------------------------------------------------------------------- |
+| boolean | Returns `true` if [Browser](/javascript-api/xk6-browser/browser/) is connected to the browser application. Otherwise, returns `false`. |
+
+
+### Example
+
+<CodeGroup labels={[]}>
+
+```javascript
+import { chromium } from 'k6/x/browser';
+
+export default function () {
+  const browser = chromium.launch();
+  const isConnected = browser.isConnected();
+  console.log(isConnected); // true
+
+  browser.close();
+}
+```
+
+</CodeGroup>