playwright-ruby-client 1.15.beta1 → 1.16.beta1

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 8
+sidebar_position: 40
 ---
 
 # Playwright on Alpine Linux
@@ -33,7 +33,23 @@ Playwright server is running on a container of [official Docker image](https://h
 
 ![overview](https://user-images.githubusercontent.com/11763113/124934448-ad4d0700-e03f-11eb-942e-b9f3282bb703.png)
 
-## Playwright client
+### Playwright Server v.s. Browser Server
+
+Playwright provides two kind of methods to share the browser environments for clients.
+
+When you want to share only one browser environment, Browser server is suitable. This feature is officially supported in Playwright.
+
+* Server can be launched with [BrowserType#launchServer](https://playwright.dev/docs/api/class-browsertype#browser-type-launch-server) instead of `BrowserType#launch`.
+* Client can connect to server with [BrowserType#connect](https://playwright.dev/docs/api/class-browsertype#browser-type-connect). In playwright-ruby-client, `BrowserType#connect` and not implemented yet and use `Playwright#connect_to_browser_server()` instead.
+
+Another method is sharing all browser environment. This method is very simple, but not an official feature, and can be changed in future.
+
+* Server can be launched with `playwright run-server` (CLI command).
+* Client can connect to server with `Playwright.connect_to_playwright_server` instead of `Playwright.create`
+
+## Playwright server/client
+
+### Client code
 
 Many example uses `Playwright#create`, which internally uses Pipe (stdin/stdout) transport for Playwright-protocol messaging. Instead, **just use `Playwright#connect_to_playwright_server(endpoint)`** for WebSocket transport.
 
@@ -51,7 +67,7 @@ end
 
 `wss://example.com:8888/ws` is an example of endpoint URL of the Playwright server. In local development environment, it is typically `"ws://127.0.0.1:#{port}/ws"`.
 
-## Playwright server
+### Server code
 
 With the [official Docker image](https://hub.docker.com/_/microsoft-playwright) or in the local development environment with Node.js, just execute `npx playwright install && npx playwright run-server $PORT`. (`$PORT` is a port number of the server)
 
@@ -67,6 +83,43 @@ ENV PORT 8888
 CMD ["./node_modules/.bin/playwright", "run-server", "$PORT"]
 ```
 
+## Browser server/client
+
+### Client code
+
+Use `Playwright#connect_to_playwright_server` and pass the WebSocket URL for browser server.
+Note that this method requires a block with `Browser`, not `Playwright` or `BrowserType`.
+
+```ruby
+Playwright.connect_to_playwright_server(ws_url) do |browser|
+  page = browser.new_page
+  page.goto(...)
+  ...
+end
+```
+
+### Server code
+
+For instant use, `npx playwright launch-server chromium` generates a WebSocket endpoint URL with a random path.
+
+More customization can be done by implementing JavaScript server like below:
+
+```js
+const playwright = require('playwright')
+
+option = {
+  channel: 'chrome-canary',
+  headless: false,
+  port: 8080,
+  wsPath: 'ws',
+}
+playwright.chromium.launchServer(option).then((server) => { console.log(server.wsEndpoint()) })
+```
+
+`port` and `wsPath` would be useful for generating static WebSocket endpoint URL.
+Other available options for `BrowserType#launchServer` can be found here:
+https://playwright.dev/docs/api/class-browsertype#browser-type-launch-server
+
 ## Debugging for connection
 
 The client and server are really quiet. This chapter shows how to check if the communication on the WebSocket works well or not.

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

@@ -2,9 +2,11 @@
 sidebar_position: 3
 ---
 
-# Integration into Ruby on Rails application
+# Capybara driver for Ruby on Rails application
 
-`playwright-ruby-client` is a client library just for browser automation. `capybara-playwright-driver` provides the [Capybara](https://github.com/teamcapybara/capybara) driver based on playwright-ruby-client and makes it easy to integrate into Ruby on Rails applications.
+`playwright-ruby-client` is a client library just for browser automation, while Rails uses [Capybara](https://github.com/teamcapybara/capybara) for system testing.
+
+`capybara-playwright-driver` provides a [Capybara](https://github.com/teamcapybara/capybara) driver based on playwright-ruby-client and makes it easy to integrate into Ruby on Rails applications.
 
 ## Installation
 

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

@@ -0,0 +1,86 @@
+---
+sidebar_position: 4
+---
+
+# Use Capybara without DSL
+
+:::note
+
+This article shows advanced-level configuration of Capybara and RSpec for more accurate automation/testing.
+If you want to just integrate Playwright into Rails application, refer the basic [configuration guide](./rails_integration)
+:::
+
+## Background
+
+[capybara-playwright-driver](./rails_integration) is easy to configure and migrate from Selenium or another Capybara driver, however it is a little **inaccurate** and would sometimes cause 'flaky test' problem originated from the internal implementation of Capybara DSL.
+
+Also **we cannot use most of useful Playwright features in Capybara driver**, such as auto-waiting, various kind of selectors, and some users would want to use Playwright features as it is without Capybara DSL.
+
+This article shows how to use playwright-ruby-client without Capybara DSL in Rails and RSpec.
+
+## Configure Capybara driver just for launching Rails server
+
+Capybara prepares the test server only when the configured driver returns true on `needs_server?` method. So we have to implement minimum driver like this:
+
+```ruby {5-7} title=spec/support/capybara_null_driver.rb
+RSpec.configure do |config|
+  require 'capybara'
+
+  class CapybaraNullDriver < Capybara::Driver::Base
+    def needs_server?
+      true
+    end
+  end
+
+  Capybara.register_driver(:null) { CapybaraNullDriver.new }
+
+  ...
+end
+```
+
+## Launch browser on each test
+
+Now Capybara DSL is unavailable with CapybaraNullDriver, we have to manually launch browsers using playwright-ruby-client.
+
+```rb
+RSpec.configure do |config|
+  require 'capybara'
+
+  ...
+
+  require 'playwright'
+
+  config.around(driver: :null) do |example|
+    Capybara.current_driver = :null
+
+    # Rails server is launched here, at the first time of accessing Capybara.current_session.server
+    base_url = Capybara.current_session.server.base_url
+
+    Playwright.create(playwright_cli_executable_path: './node_modules/.bin/playwright') do |playwright|
+      # pass any option for Playwright#launch and Browser#new_page as you prefer.
+      playwright.chromium.launch(headless: false) do |browser|
+        @playwright_page = browser.new_page(baseURL: base_url)
+        example.run
+      end
+    end
+  end
+end
+```
+
+With the configuration above, we can describe system-test codes with native Playwright methods like below:
+
+```rb
+require 'rails_helper'
+
+describe 'example', driver: :null do
+  let!(:user) { FactoryBot.create(:user) }
+  let(:page) { @playwright_page }
+
+  it 'can browse' do
+    page.goto("/tests/#{user.id}")
+    page.wait_for_selector('input').type('hoge')
+    page.keyboard.press('Enter')
+    expect(page.text_content('#content')).to include('hoge')
+  end
+end
+```

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 10
 ---
 
 # Recording video

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 20
 ---
 
 # Semi-automation

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

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 21
 ---
 
 # Reuse Cookie and LocalStorage

data/documentation/docs/include/api_coverage.md

@@ -2,9 +2,12 @@
 
 ## Request
 
+* all_headers
 * failure
 * frame
 * headers
+* headers_array
+* header_value
 * navigation_request?
 * method
 * post_data
@@ -14,15 +17,20 @@
 * redirected_to
 * resource_type
 * response
+* sizes
 * timing
 * url
 
 ## Response
 
+* all_headers
 * body
 * finished
 * frame
 * headers
+* headers_array
+* header_value
+* header_values
 * json
 * ok
 * request
@@ -40,6 +48,13 @@
 * fulfill
 * request
 
+## FetchRequest
+
+* ~~dispose~~
+* ~~fetch~~
+* ~~get~~
+* ~~post~~
+
 ## WebSocket
 
 * closed?
@@ -62,6 +77,7 @@
 * down
 * move
 * up
+* wheel
 
 ## Touchscreen
 
@@ -108,6 +124,7 @@
 * scroll_into_view_if_needed
 * select_option
 * select_text
+* set_checked
 * set_input_files
 * tap_point
 * text_content
@@ -166,6 +183,7 @@
 * query_selector
 * query_selector_all
 * select_option
+* set_checked
 * set_content
 * set_input_files
 * tap_point
@@ -269,6 +287,7 @@
 * route
 * screenshot
 * select_option
+* set_checked
 * set_content
 * set_default_navigation_timeout
 * set_default_timeout
@@ -375,7 +394,9 @@
 ## Tracing
 
 * start
+* start_chunk
 * stop
+* stop_chunk
 
 ## Locator
 
@@ -414,11 +435,13 @@
 * scroll_into_view_if_needed
 * select_option
 * select_text
+* set_checked
 * set_input_files
 * tap_point
 * text_content
 * type
 * uncheck
+* wait_for
 
 ## Android
 

data/documentation/docusaurus.config.js

@@ -10,6 +10,7 @@ module.exports = {
   organizationName: 'YusukeIwaki', // Usually your GitHub org/user name.
   projectName: 'playwright-ruby-client', // Usually your repo name.
   themeConfig: {
+    image: 'img/playwright-ruby-client.png',
     navbar: {
       title: 'playwright-ruby-client',
       logo: {

data/documentation/package.json

@@ -14,8 +14,8 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.0",
-    "@docusaurus/preset-classic": "2.0.0-beta.0",
+    "@docusaurus/core": "^2.0.0-beta.6",
+    "@docusaurus/preset-classic": "^2.0.0-beta.6",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",

data/documentation/src/pages/index.js

@@ -39,7 +39,6 @@ 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>