discourse/spec/system/page_objects/components/navigation_menu/base.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

238 lines
7.2 KiB
Ruby
Vendored

# frozen_string_literal: true
module PageObjects
module Components
module NavigationMenu
class Base < PageObjects::Components::Base
SIDEBAR_SECTION_LINK_SELECTOR = "sidebar-section-link"
def visible?
has_css?("#d-sidebar.sidebar-container")
end
def hidden?
has_no_css?("#d-sidebar.sidebar-container")
end
def community_section
find_section("community")
end
def find_section(name)
find(sidebar_section_selector(name))
end
def click_section_header(name)
find("#{sidebar_section_selector(name)} .sidebar-section-header").click
end
def click_section_link(name)
find(".#{SIDEBAR_SECTION_LINK_SELECTOR}", text: name).click
end
def click_link_in_section(section_name, link_name)
find_section(section_name.parameterize).find(
".#{SIDEBAR_SECTION_LINK_SELECTOR}[data-link-name=\"#{link_name.parameterize}\"]",
).click
end
def has_one_active_section_link?
has_css?(".#{SIDEBAR_SECTION_LINK_SELECTOR}--active", count: 1)
end
def has_section_link?(name, href: nil, active: false, target: nil, count: 1)
section_link_present?(
name,
href: href,
active: active,
target: target,
present: true,
count: count,
)
end
def has_no_section_link?(name, href: nil, active: false)
section_link_present?(name, href: href, active: active, present: false)
end
def has_section?(name)
has_css?(".sidebar-sections [data-section-name='#{name.parameterize}']")
end
def has_no_section?(name)
has_no_css?(".sidebar-sections [data-section-name='#{name.parameterize}']")
end
def has_section_expanded?(name)
has_css?("#{sidebar_section_selector(name)}.sidebar-section--expanded")
end
def has_section_collapsed?(name)
has_css?("#{sidebar_section_selector(name)}.sidebar-section--collapsed")
end
def switch_to_chat
find(".sidebar__panel-switch-button[data-key='chat']").click
end
def switch_to_main
find(".sidebar__panel-switch-button[data-key='main']").click
end
def has_switch_button?(key = nil)
if key
page.has_css?(".sidebar__panel-switch-button[data-key='#{key.parameterize}']")
else
page.has_css?(".sidebar__panel-switch-button")
end
end
def has_no_switch_button?(key = nil)
if key
page.has_no_css?(".sidebar__panel-switch-button[data-key='#{key.parameterize}']")
else
page.has_no_css?(".sidebar__panel-switch-button")
end
end
def has_categories_section?
has_section?("Categories")
end
def has_tags_section?
has_section?("Tags")
end
def has_no_tags_section?
has_no_section?("Tags")
end
def has_all_tags_section_link?
has_section_link?(I18n.t("js.sidebar.all_tags"))
end
def has_tag_section_links?(tags)
tag_names = tags.map(&:name)
tag_section_links =
all(
".sidebar-section[data-section-name='tags'] .sidebar-section-link-wrapper[data-tag-name]",
count: tag_names.length,
)
expect(tag_section_links.map(&:text)).to eq(tag_names)
end
def has_tag_section_link_with_title?(tag, title)
section_link =
find(
".sidebar-section[data-section-name='tags'] .sidebar-section-link-wrapper[data-tag-name='#{tag.name}'] .sidebar-section-link",
)
expect(section_link["title"]).to eq(title)
end
def find_section_link(name)
find(".#{SIDEBAR_SECTION_LINK_SELECTOR}[data-link-name='#{name}']")
end
def primary_section_links(slug)
all("[data-section-name='#{slug}'] .sidebar-section-link-wrapper").map(&:text)
end
def primary_section_icons(slug)
all("[data-section-name='#{slug}'] .sidebar-section-link-wrapper use").map do |icon|
icon[:href].delete_prefix("#")
end
end
def has_category_section_link?(category)
page.has_link?(category.name, class: "sidebar-section-link")
end
def click_add_section_button
click_button(add_section_button_text)
end
def click_add_link_button
click_button(add_link_button_text)
end
def has_no_add_section_button?
has_no_css?(add_section_button_css)
end
def has_add_section_button?
has_css?(add_section_button_css)
end
def click_edit_categories_button
within(".sidebar-section[data-section-name='categories']") do
click_button(class: "sidebar-section-header-button", visible: false)
end
expect(page).to have_css(".d-modal:not(.is-animating)")
PageObjects::Modals::SidebarEditCategories.new
end
def click_edit_tags_button
within(".sidebar-section[data-section-name='tags']") do
click_button(class: "sidebar-section-header-button", visible: false)
end
expect(page).to have_css(".d-modal:not(.is-animating)")
expect(page).to have_css(".d-modal .sidebar-tags-form")
PageObjects::Modals::SidebarEditTags.new
end
def edit_custom_section(name)
name = name.parameterize
if page.has_css?("html.mobile-view", wait: 0)
find(
".sidebar-section[data-section-name='#{name}'] button.sidebar-section-header-button",
visible: false,
).click
else
section_selector =
".sidebar-section[data-section-name='#{name}'] .sidebar-section-header-wrapper"
page.driver.with_playwright_page { |pw_page| pw_page.locator(section_selector).hover }
expect(page).to have_css("button.sidebar-section-header-button", visible: true)
find("#{section_selector} button.sidebar-section-header-button").click
end
end
private
def sidebar_section_selector(name)
".sidebar-section[data-section-name='#{name}']"
end
def section_link_present?(name, href: nil, active: false, target: nil, count: 1, present:)
attributes = { exact_text: name }
attributes[:href] = href if href
attributes[:class] = SIDEBAR_SECTION_LINK_SELECTOR
attributes[:class] += "--active" if active
attributes[:target] = target if target
attributes[:count] = count
page.public_send(present ? :has_link? : :has_no_link?, **attributes)
end
def add_section_button_text
I18n.t("js.sidebar.sections.custom.add")
end
def add_link_button_text
I18n.t("js.sidebar.sections.custom.links.add")
end
def add_section_button_css
".sidebar-footer-actions-button.add-section"
end
end
end
end
end