mirror of
https://gh.wpcy.net/https://github.com/discourse/discourse.git
synced 2026-05-07 02:22:49 +08:00
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)") ```
164 lines
4.5 KiB
Ruby
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
|