Browser Testing Setup
Selenium Configuration
// dev/tests/functional/etc/config.php
return [
'browser' => [
'name' => 'chrome',
'capabilities' => [
'extra_capabilities' => [
'chromeOptions' => [
'args' => ['--headless', '--disable-gpu'],
],
],
],
],
'selenium' => [
'host' => 'localhost',
'port' => 4444,
],
'magento_base_url' => 'http://magento.local',
];
Codeception Setup
# codeception.yml
actor: Tester
paths:
tests: tests
output: tests/_output
data: tests/_data
support: tests/_support
envs: tests/_envs
settings:
bootstrap: _bootstrap.php
colors: true
memory_limit: 1024M
log: true
extensions:
enabled:
- Codeception\Extension\RunFailed
Running Functional Tests
# Install Codeception
composer require --dev codeception/codeception
# Generate tests
generate:cept Acceptance/Login
# Run acceptance tests
cceptance run
# Run with specific suite
cceptance run LoginCest
Key Points
- Functional tests simulate real user interactions
- Use headless browsers for CI/CD
- Test across different browsers
- Focus on critical user journeys
UI Testing Scenarios
Customer Registration Test
class RegisterCest
{
public function registerSuccessfully(AcceptanceTester $I)
{
$I->amOnPage('/customer/account/create/');
$I->fillField('firstname', 'John');
$I->fillField('lastname', 'Doe');
$I->fillField('email', 'john@example.com');
$I->fillField('password', 'Password123!');
$I->fillField('password_confirmation', 'Password123!');
$I->click('Create an Account');
$I->see('Thank you for registering');
$I->seeCurrentUrlEquals('/customer/account/');
}
public function registerWithExistingEmail(AcceptanceTester $I)
{
$I->amOnPage('/customer/account/create/');
$I->fillField('firstname', 'John');
$I->fillField('lastname', 'Doe');
$I->fillField('email', 'existing@example.com');
$I->fillField('password', 'Password123!');
$I->fillField('password_confirmation', 'Password123!');
$I->click('Create an Account');
$I->see('There is already an account with this email address');
}
}
Shopping Cart Test
class ShoppingCartCest
{
public function addToCart(AcceptanceTester $I)
{
$I->amOnPage('/');
$I->click('.product-item-link');
$I->click('#product-addtocart-button');
$I->see('You added');
$I->see('1', '.counter-number');
}
public function removeFromCart(AcceptanceTester $I)
{
$I->amOnPage('/checkout/cart/');
$I->click('.action-delete');
$I->see('You removed the item');
$I->see('Your shopping cart is empty');
}
}
Key Points
- Test happy paths and error scenarios
- Use meaningful test names
- Verify both UI and data changes
- Handle asynchronous operations
Test Scenarios
User Journey Scenarios
# tests/functional/Magento/Checkout/Test/Functional/Checkout.feature
Feature: Checkout Process
As a customer
I want to complete a purchase
So that I can receive my products
Scenario: Successful checkout with credit card
Given I am logged in as "customer@example.com"
And I have a product "Test Product" in my cart
When I proceed to checkout
And I enter shipping information
And I select "Credit Card" payment method
And I place the order
Then I should see "Thank you for your purchase"
And I should receive order confirmation email
Scenario: Checkout with invalid credit card
Given I am logged in as "customer@example.com"
And I have a product "Test Product" in my cart
When I proceed to checkout
And I enter shipping information
And I enter invalid credit card details
And I try to place the order
Then I should see "Invalid credit card information"
Acceptance Criteria
test_acceptance_criteria:
user_registration:
given: "A visitor on the registration page"
when: "Fills in valid registration form"
then:
- "Account is created"
- "User is logged in"
- "Welcome email is sent"
add_to_cart:
given: "A customer viewing a product"
when: "Clicks Add to Cart"
then:
- "Product is added to cart"
- "Cart counter updates"
- "Success message is shown"
Key Points
- Use Gherkin syntax for readable scenarios
- Cover happy paths and edge cases
- Include clear acceptance criteria
- Test across different user roles
Practice Problems
0 / 1 solved
User Journey Test
Write a functional test that covers the complete checkout process from adding a product to order confirmation.
Solution
public function testCompleteCheckout(AcceptanceTester $I) {
// 1. Add product to cart
$I->amOnPage('/simple-product.html');
$I->click('#product-addtocart-button');
$I->see('You added');
// 2. Go to checkout
$I->click('.showcart');
$I->click('#top-cart-btn-checkout');
$I->waitForElement('#checkout-step-shipping', 10);
// 3. Enter shipping info
$I->fillField('firstname', 'John');
$I->fillField('lastname', 'Doe');
$I->fillField('street[0]', '123 Main St');
$I->fillField('city', 'Austin');
$I->selectOption('region_id', 'Texas');
$I->fillField('postcode', '78701');
$I->fillField('telephone', '555-123-4567');
$I->click('button[title="Next"]');
// 4. Select payment
$I->waitForElement('#checkout-step-payment', 10);
$I->click('button[title="Place Order"]');
// 5. Verify confirmation
$I->waitForPageLoad(30);
$I->see('Thank you for your purchase');
} Quiz
1. What do functional tests verify?
2. What is headless browser testing?
3. What is Gherkin syntax?
4. Why use Codeception for functional tests?
Flashcards
Question
Functional test scope?
Click to reveal answer
Answer
Complete user workflows from start to finish
Question
Headless browser benefit?
Click to reveal answer
Answer
Runs without GUI, ideal for CI/CD pipelines
Question
Gherkin syntax keywords?
Click to reveal answer
Answer
Given/When/Then for BDD scenarios
Question
Codeception advantage?
Click to reveal answer
Answer
Supports acceptance, functional, and unit testing
Revision Notes
Key Takeaways
- 1. Functional tests simulate real user interactions
- 2. Use headless browsers for automated testing
- 3. Write scenarios using Given/When/Then syntax
- 4. Focus on critical user journeys and edge cases
Interview Tips
- • Explain the difference between functional and unit tests
- • Discuss BDD and acceptance criteria
- • Know how to set up browser testing
Cheat Sheet
Functional Tests
- Scope: user workflows
- Tools: Selenium, Codeception, MFTF
- Syntax: Given/When/Then (Gherkin)
- Run: headless in CI/CD