discourse/spec/system/page_objects/cdp.rb
Joffrey JAFFEUX b6aad28ccf
DEV: replace selenium driver with playwright (#31977)
This commit is replacing the system specs driver (selenium) by
Playwright: https://playwright.dev/

We are still using Capybara to write the specs but they will now be run
by Playwright. To achieve this we are using the non official ruby
driver: https://github.com/YusukeIwaki/capybara-playwright-driver

### Notable changes

- `CHROME_DEV_TOOLS` has been removed, it's not working well with
playwright use `pause_test` and inspect browser for now.

- `fill_in` is not generating key events in playwright, use `send_keys`
if you need this.

### New spec options

#### trace

Allows to capture a trace in a zip file which you can load at
https://trace.playwright.dev or locally through `npx playwright
show-trace /path/to/trace.zip`

_Example usage:_

```ruby
it "shows bar", trace: true do
  visit("/")

  find(".foo").click

  expect(page).to have_css(".bar")
end
```

#### video

Allows to capture a video of your spec.

_Example usage:_

```ruby
it "shows bar", video: true do
  visit("/")

  find(".foo").click

  expect(page).to have_css(".bar")
end
```

### New env variable

#### PLAYWRIGHT_SLOW_MO_MS

Allow to force playwright to wait DURATION (in ms) at each action.

_Example usage:_

```
PLAYWRIGHT_SLOW_MO_MS=1000 rspec foo_spec.rb
```

#### PLAYWRIGHT_HEADLESS

Allow to be in headless mode or not. Default will be headless.

_Example usage:_

```
PLAYWRIGHT_HEADLESS=0 rspec foo_spec.rb # will show the browser
```

### New helpers

#### with_logs

Allows to access the browser logs and check if something specific has
been logged.

_Example usage:_

```ruby
with_logs do |logger|
  # do something

  expect(logger.logs.map { |log| log[:message] }).to include("foo")
end
```

#### add_cookie

Allows to add a cookie on the browser session.

_Example usage:_

```ruby
add_cookie(name: "destination_url", value: "/new")
```

#### get_style

Get the property style value of an element.

_Example usage:_

```ruby
expect(get_style(find(".foo"), "height")).to eq("200px")
```

#### get_rgb_color

Get the rgb color of an element.

_Example usage:_

```ruby
expect(get_rgb_color(find("html"), "backgroundColor")).to eq("rgb(170, 51, 159)")
```
2025-05-06 10:44:14 +02:00

164 lines
4.5 KiB
Ruby

# frozen_string_literal: true
module PageObjects
class CDP
include Capybara::DSL
include SystemHelpers
include RSpec::Matchers
def allow_clipboard
page.driver.with_playwright_page do |pw_page|
pw_page.context.grant_permissions(["clipboard-read"], origin: pw_page.url)
pw_page.context.grant_permissions(["clipboard-write"], origin: pw_page.url)
end
end
def read_clipboard
page.evaluate_async_script("navigator.clipboard.readText().then(arguments[0])")
end
def write_clipboard(content, html: false)
if html
page.evaluate_async_script(
"navigator.clipboard.write([
new ClipboardItem({
'text/html': new Blob([arguments[0]], { type: 'text/html' }),
'text/plain': new Blob([arguments[0]], { type: 'text/plain' })
})
]).then(arguments[1])",
content,
)
else
page.evaluate_async_script(
"navigator.clipboard.writeText(arguments[0]).then(arguments[1])",
content,
)
end
end
def copy_test_image
image_path = "spec/fixtures/images/logo.png"
image_data = File.read(image_path)
image_base64 = Base64.strict_encode64(image_data)
page.evaluate_async_script(<<~JAVASCRIPT)
const htmlBlob = new Blob(['<img src="data:image/png;base64,placeholder"/>'], { type: 'text/html' });
const imageBlob = new Blob([Uint8Array.from(atob("#{image_base64}"), c => c.charCodeAt(0))], { type: 'image/png' });
const item = new ClipboardItem({ 'text/html': htmlBlob, 'image/png': imageBlob });
navigator.clipboard.write([item]).then(arguments[0]).catch(console.error);
JAVASCRIPT
end
def clipboard_has_text?(text, chomp: false, strict: true)
try_until_success do
clipboard_text = chomp ? read_clipboard.chomp : read_clipboard
expect(clipboard_text).to strict ? eq(text) : include(text)
end
end
def copy_paste(text, html: false, css_selector: nil)
allow_clipboard
write_clipboard(text, html: html)
paste(css_selector:)
end
def paste(css_selector: nil)
if css_selector
find(css_selector).send_keys([PLATFORM_KEY_MODIFIER, "v"])
else
page.send_keys([PLATFORM_KEY_MODIFIER, "v"])
end
end
def with_network_disconnected
page.driver.with_playwright_page do |pw_page|
begin
cdp_client = pw_page.context.new_cdp_session(pw_page)
cdp_client.send_message(
"Network.emulateNetworkConditions",
params: {
offline: true,
latency: 0,
downloadThroughput: -1,
uploadThroughput: -1,
},
)
yield
ensure
cdp_client.send_message(
"Network.emulateNetworkConditions",
params: {
offline: false,
latency: 0,
downloadThroughput: -1,
uploadThroughput: -1,
},
)
end
end
end
def with_slow_download
page.driver.with_playwright_page do |pw_page|
begin
cdp_client = pw_page.context.new_cdp_session(pw_page)
cdp_client.send_message(
"Network.emulateNetworkConditions",
params: {
offline: false,
latency: 20_000,
downloadThroughput: 1,
uploadThroughput: -1,
},
)
yield
ensure
cdp_client.send_message(
"Network.emulateNetworkConditions",
params: {
offline: false,
latency: 0,
downloadThroughput: -1,
uploadThroughput: -1,
},
)
end
end
end
def with_slow_upload
page.driver.with_playwright_page do |pw_page|
begin
cdp_client = pw_page.context.new_cdp_session(pw_page)
cdp_client.send_message(
"Network.emulateNetworkConditions",
params: {
offline: false,
latency: 20_000,
downloadThroughput: -1,
uploadThroughput: 1,
},
)
yield
ensure
cdp_client.send_message(
"Network.emulateNetworkConditions",
params: {
offline: false,
latency: 0,
downloadThroughput: -1,
uploadThroughput: -1,
},
)
end
end
end
end
end