求Angular Material API测试实用Cucumber/Capybara表达式及用法

Hey there! Working with Angular Material (especially Angular 5+) alongside Cucumber and Capybara is such a common combo, but it can take a bit of tweaking to get smooth, readable steps. Let me share some practical expressions and custom selector tricks I’ve picked up:

These reusable steps target the most common Angular Material components, making your feature files more readable and your step definitions DRY:

• 点击 Material 按钮
  Cucumber Feature 步骤:

  When I click the "Submit" material button
  

  Corresponding Capybara Step Definition:

  When(/^I click the "([^"]*)" material button$/) do |button_text|
    # Matches any mat-button, mat-raised-button, etc.
    find('button[class*="mat-button"]', text: button_text).click
  end
  

• 填写 Material 输入框
  Cucumber Feature 步骤:

  When I enter "john@example.com" into the "Email Address" material input
  

  Corresponding Capybara Step Definition:

  When(/^I enter "([^"]*)" into the "([^"]*)" material input$/) do |value, label_text|
    # Targets the input within a mat-form-field matching the label
    form_field = find('mat-form-field', text: label_text)
    form_field.find('input.mat-input-element').set(value)
  end
  

• 选择 Material 下拉选项
  Cucumber Feature 步骤:

  Then I select "Premium" from the "Subscription Tier" material dropdown
  

  Corresponding Capybara Step Definition:

  Then(/^I select "([^"]*)" from the "([^"]*)" material dropdown$/) do |option_text, label_text|
    # Opens the dropdown and selects the desired option
    find('mat-form-field', text: label_text).click
    find('mat-option', text: option_text).click
  end
  

• 验证 Material 对话框状态
  Cucumber Feature 步骤:

  Then the "Order Confirmation" material dialog should be visible
  

  Corresponding Capybara Step Definition:

  Then(/^the "([^"]*)" material dialog should be visible$/) do |dialog_title|
    dialog = find('mat-dialog-container')
    expect(dialog).to be_visible
    expect(dialog).to have_text(dialog_title)
  end
  

If you’re used to working with Bootstrap-style .modal-dialog selectors and want a similar shorthand for Angular Material’s mat-dialog-container, here’s how to set it up:

Step 1: Define a Custom Capybara Selector #

Add this to your Capybara support file (typically features/support/selectors.rb):

# Create a custom selector for material dialogs
Capybara.add_selector :material_dialog do
  # Basic selector to match any mat-dialog-container
  css { 'mat-dialog-container' }

  # Optional: Extend to match dialogs by title
  xpath do |title|
    XPath.css('mat-dialog-container').contains(XPath.css('h2.mat-dialog-title', text: title))
  end
end

Step 2: Use the Custom Selector in Step Definitions #

Now you can reference the dialog with a cleaner syntax, just like you would with .modal-dialog:

Basic Usage (match any dialog) #

Then(/^the material dialog is visible$/) do
  expect(find(:material_dialog)).to be_visible
end

Target a Dialog by Title #

Then(/^the "([^"]*)" material dialog contains "([^"]*)"$/) do |dialog_title, content|
  expect(find(:material_dialog, dialog_title)).to have_content(content)
end

Step 3: (Optional) Create a Helper Method for Even Shorter Syntax #

If you want something even closer to find('.modal-dialog'), add a helper method to your support file:

def material_dialog(title = nil)
  title ? find(:material_dialog, title) : find(:material_dialog)
end

# Usage in steps:
Then(/^I close the material dialog$/) do
  material_dialog.find('button.mat-button', text: 'Close').click
end

内容的提问来源于stack exchange，提问作者Paul Hamilton