playwright-ruby-client 0.5.10 → 0.6.4

data/documentation/docs/article/guides/recording_video.md

@@ -0,0 +1,79 @@
+---
+sidebar_position: 4
+---
+
+# Recording video
+
+Playwright allows us to record the browser screen during automation.
+https://playwright.dev/docs/videos
+
+With this awesome feature, NO NEED to keep our attention focused on the screen during the automation :)
+
+```ruby {7,11-12,15-16}
+require 'tmpdir'
+
+playwright.chromium.launch do |browser|
+  Dir.mktmpdir do |tmp|
+    video_path = nil
+
+    browser.new_context(record_video_dir: tmp) do |context|
+      page = context.new_page
+      # play with page
+
+      # NOTE: Page#video is available **only when browser context is alive.**
+      video_path = page.video.path
+    end
+
+    # NOTE: video is completely saved **only after browser context is closed.**
+    handle_video_as_you_like(video_path)
+  end
+```
+
+## Specify where to put videos
+
+Playwright puts videos on the directory specified at `record_video_dir`.
+
+The previous example uses [Dir#mktmpdir](https://docs.ruby-lang.org/ja/latest/method/Dir/s/mktmpdir.html) for storing videos into a temprary directory. Also we simply specify a relative or absolute path like `./my_videos/` or `/path/to/videos`.
+
+## Getting video path and recorded video
+
+This is really confising for beginners, but in Playwright
+
+* We can get the video path **only when page is alive (before calling BrowserContext#close or Page#close)**
+* We can acquire the completely saved video **only after calling  BrowserContext#close**
+
+So in most case, we have to store the video path in advance, and handle the saved video after BrowserContext is closed, as is shown the previous example code.
+
+### Using `video#save_as(path)`
+
+If you want to just save video to somewhere without handling the video using `File.open`, you can simply use `video#save_as(path_to_save)`.
+
+```ruby {5,8,12-13}
+require 'tmpdir'
+
+playwright.chromium.launch do |browser|
+  Dir.mktmpdir do |tmp|
+    page = nil
+
+    browser.new_context(record_video_dir: tmp) do |context|
+      page = context.new_page
+      # play with page
+    end
+
+    # NOTE: video is completely saved **only after browser context is closed.**
+    page.video.save_as('my-important-video.webm')
+  end
+```
+
+## Using screen recording from Capybara driver
+
+capybara-playwright-driver exposes a function to store the video.
+
+```ruby
+Capybara.current_session.driver.on_save_screenrecord do |video_path|
+  # Handling recorded video here.
+  # video_path is like '/var/folders/xx/xxxxxxxxxx_xxxxxxxx/T/xxxxxxx-xxxxx-xxxxxxxx/e6bde41c5d05b2a02344b058bf1bfea2.webm'
+end
+```
+
+With this callback registration, we can record the videos without specifying `record_video_dir` explicitly or preparing a temporary directory. capybara-playwright-driver automatically prepare and set `record_video_dir` internally.

data/{docs → documentation/docs/include}/api_coverage.md

@@ -175,7 +175,7 @@
 * ~~wait_for_timeout~~
 * wait_for_url
 
-## ~~Worker~~
+## Worker
 
 * ~~evaluate~~
 * ~~evaluate_handle~~
@@ -273,10 +273,12 @@
 * expect_navigation
 * expect_popup
 * expect_request
+* ~~expect_request_finished~~
 * expect_response
 * wait_for_selector
 * ~~wait_for_timeout~~
 * wait_for_url
+* ~~expect_websocket~~
 * ~~expect_worker~~
 * ~~workers~~
 * ~~wait_for_event~~
@@ -313,6 +315,7 @@
 * expect_event
 * expect_page
 * ~~wait_for_event~~
+* tracing
 
 ## ~~CDPSession~~
 
@@ -333,6 +336,8 @@
 
 ## BrowserType
 
+* ~~connect~~
+* connect_over_cdp
 * executable_path
 * launch
 * ~~launch_persistent_context~~
@@ -347,6 +352,11 @@
 * selectors
 * webkit
 
+## Tracing
+
+* start
+* stop
+
 ## Android
 
 * devices

data/documentation/docusaurus.config.js

@@ -0,0 +1,107 @@
+/** @type {import('@docusaurus/types').DocusaurusConfig} */
+module.exports = {
+  title: 'playwright-ruby-client',
+  tagline: 'Playwright client library for Ruby',
+  url: 'https://playwright-ruby-client.vercel.app',
+  baseUrl: '/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/playwright-logo.svg',
+  organizationName: 'YusukeIwaki', // Usually your GitHub org/user name.
+  projectName: 'playwright-ruby-client', // Usually your repo name.
+  themeConfig: {
+    navbar: {
+      title: 'playwright-ruby-client',
+      logo: {
+        alt: 'Playwright',
+        src: 'img/playwright-logo.svg',
+      },
+      items: [
+        {
+          type: 'doc',
+          docId: 'article/getting_started',
+          position: 'left',
+          label: 'Docs',
+        },
+        {
+          type: 'doc',
+          docId: 'api/playwright',
+          position: 'left',
+          label: 'API',
+        },
+        {
+          href: 'https://github.com/YusukeIwaki/playwright-ruby-client',
+          'aria-label': 'GitHub',
+          className: 'header-github-link',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        {
+          title: 'Docs',
+          items: [
+            {
+              label: 'Getting started',
+              to: '/docs/article/getting_started',
+            },
+            {
+              label: 'API reference',
+              to: '/docs/api/playwright',
+            },
+          ],
+        },
+        {
+          title: 'Source codes',
+          items: [
+            {
+              label: 'playwright-ruby-client',
+              to: 'https://github.com/YusukeIwaki/playwright-ruby-client',
+            },
+            {
+              label: 'capybara-playwright-driver',
+              to: 'https://github.com/YusukeIwaki/capybara-playwright-driver',
+            },
+          ],
+        },
+        {
+          title: 'HowTo',
+          items: [
+            {
+              label: 'Develop Playwright driver for Ruby',
+              to: 'https://yusukeiwaki.hatenablog.com/entry/2021/01/13/how-to-create-playwright-ruby-client',
+            },
+            {
+              label: 'Implement your own Capybara driver',
+              to: 'https://zenn.dev/yusukeiwaki/scraps/280aabf289ae29',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} @YusukeIwaki. <p>Built with <a href="https://v2.docusaurus.io/">Docusaurus</a>.</p>`,
+    },
+    prism: {
+      additionalLanguages: ['bash', 'ruby'],
+    },
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+        },
+        blog: {
+          feedOptions: {
+            type: null,
+          },
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      },
+    ],
+  ],
+};

data/documentation/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "playwright-ruby-docs",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "docusaurus": "docusaurus",
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy",
+    "clear": "docusaurus clear",
+    "serve": "docusaurus serve",
+    "write-translations": "docusaurus write-translations",
+    "write-heading-ids": "docusaurus write-heading-ids"
+  },
+  "dependencies": {
+    "@docusaurus/core": "2.0.0-beta.0",
+    "@docusaurus/preset-classic": "2.0.0-beta.0",
+    "@mdx-js/react": "^1.6.21",
+    "@svgr/webpack": "^5.5.0",
+    "clsx": "^1.1.1",
+    "file-loader": "^6.2.0",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "url-loader": "^4.1.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.5%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

data/documentation/sidebars.js

@@ -0,0 +1,15 @@
+/**
+ * Creating a sidebar enables you to:
+ - create an ordered group of docs
+ - render a sidebar for each doc of that group
+ - provide next/previous navigation
+
+ The sidebars can be generated from the filesystem, or explicitly defined here.
+
+ Create as many sidebars as you want.
+ */
+
+module.exports = {
+  docsSidebar: [{ type: 'autogenerated', dirName: 'article' }],
+  apiSidebar: [{ type: 'autogenerated', dirName: 'api' }],
+};

data/documentation/src/components/HomepageFeatures.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './HomepageFeatures.module.css';
+
+const FeatureList = [
+  {
+    title: 'Test across modern browsers',
+    Svg: require('../../static/img/undraw_windows.svg').default,
+    description: (
+      <>
+        Provide browser automation for Chrome, MS Edge, Firefox, and WebKit.
+      </>
+    ),
+  },
+  {
+    title: 'Make more relyable tests',
+    Svg: require('../../static/img/undraw_dropdown_menu.svg').default,
+    description: (
+      <>
+        Automate with JavaScript-based Playwright protocol, which precisely wait for elements.
+      </>
+    ),
+  },
+  {
+    title: 'Work with Ruby on Rails',
+    Svg: require('../../static/img/undraw_web_development.svg').default,
+    description: (
+      <>
+        Keep your existing system specs for Rails. Just use <a href="https://rubygems.org/gems/capybara-playwright-driver">capybara-playwright-driver</a>.
+      </>
+    ),
+  },
+];
+
+function Feature({ Svg, title, description }) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">
+        <Svg className={styles.featureSvg} alt={title} />
+      </div>
+      <div className="text--center padding-horiz--md">
+        <h3>{title}</h3>
+        <p>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function HomepageFeatures() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+        <div className="row">
+          {FeatureList.map((props, idx) => (
+            <Feature key={idx} {...props} />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

data/documentation/src/components/HomepageFeatures.module.css

@@ -0,0 +1,13 @@
+/* stylelint-disable docusaurus/copyright-header */
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureSvg {
+  height: 200px;
+  width: 200px;
+}

data/documentation/src/css/custom.css

@@ -0,0 +1,44 @@
+/* stylelint-disable docusaurus/copyright-header */
+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #0094d9;
+  --ifm-color-primary-dark: #0085c3;
+  --ifm-color-primary-darker: #0076ad;
+  --ifm-color-primary-darkest: #006797;
+  --ifm-color-primary-light: #199edc;
+  --ifm-color-primary-lighter: #32a9e0;
+  --ifm-color-primary-lightest: #4cb4e4;
+
+  --ifm-code-font-size: 95%;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+html[data-theme='dark'] .header-github-link:before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}

data/documentation/src/pages/index.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './index.module.css';
+import HomepageFeatures from '../components/HomepageFeatures';
+
+function HomepageHeader() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <header className={clsx('hero hero--dark', styles.heroBanner)}>
+      <div className="container">
+        <h1 className="hero__title">{siteConfig.title}</h1>
+        <p className="hero__subtitle">{siteConfig.tagline}</p>
+        <div className={styles.indexCtas}>
+          <Link
+            className="button button--lg button--primary"
+            to="/docs/article/getting_started">
+            Getting started
+          </Link>
+
+          <span className={styles.indexCtasGitHubButtonWrapper}>
+            <iframe
+              className={styles.indexCtasGitHubButton}
+              src="https://ghbtns.com/github-btn.html?user=YusukeIwaki&amp;repo=playwright-ruby-client&amp;type=star&amp;count=true&amp;size=large"
+              width={160}
+              height={30}
+              title="GitHub Stars"
+            />
+          </span>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default function Home() {
+  const { siteConfig } = useDocusaurusContext();
+  return (
+    <Layout
+      title={siteConfig.title}
+      description="Cross-browser end-to-end testing for modern web apps">
+      <HomepageHeader />
+      <main>
+        <HomepageFeatures />
+      </main>
+    </Layout>
+  );
+}