A professional test automation framework for SLB website testing using TypeScript, Cucumber (BDD), and Playwright.

• BDD Approach: Behavior-Driven Development with Cucumber and Gherkin syntax
• TypeScript: Type-safe test automation with full IntelliSense support
• Playwright: Modern, reliable browser automation across Chromium, Firefox, and WebKit
• Page Object Model: Maintainable test architecture with reusable page objects
• Single Session Mode: Optional feature to run all scenarios in one browser session (50-60% faster)
• Robust Cookie Handling: Automatic OneTrust cookie consent management with multi-strategy approach
• Resilient Interactions: Smart click strategies (normal → JavaScript → navigation) to handle overlays
• Rich Reporting: HTML, JSON, and JUnit reports with screenshots and videos on failure
• Code Quality: ESLint and Prettier for consistent code style
• CI/CD Ready: Configured for continuous integration pipelines

• Node.js (v18 or higher)
• npm or yarn
• Git

1. Clone the repository:

git clone <repository-url>
cd slb-tests

2. Install dependencies:

npm install

3. Install Playwright browsers:

npx playwright install

4. Set up environment variables:

cp .env.example .env

slb-tests/
├── features/                    # Cucumber feature files (BDD scenarios)
│   ├── homepage-navigation.feature
│   ├── content-verification.feature
│   └── search.feature          # Search functionality tests
├── src/
│   ├── pages/                   # Page Object Model classes
│   │   ├── BasePage.ts
│   │   ├── HomePage.ts
│   │   └── ContactPage.ts
│   ├── steps/                   # Cucumber step definitions
│   │   ├── homepage-steps.ts
│   │   ├── content-steps.ts
│   │   └── search-steps.ts     # Search-related steps
│   ├── support/                 # Test support files
│   │   ├── browser.ts          # Browser management
│   │   ├── hooks.ts            # Cucumber hooks
│   │   └── report-generator.js # Report generation
│   ├── utils/                   # Utility functions
│   │   └── cookie-handler.ts   # Cookie banner handling
│   └── config/                  # Configuration files
│       └── config.ts
├── reports/                     # Test reports and artifacts
├── cucumber.js                  # Cucumber configuration
├── playwright.config.ts         # Playwright configuration
├── tsconfig.json               # TypeScript configuration
└── package.json

npm test

npm run test:all

npm run test:headed

npx cucumber-js features/homepage-navigation.feature

npx cucumber-js features/homepage-navigation.feature:10

After running tests, reports are generated in the reports/ directory:

• HTML Report: reports/index.html - Interactive HTML report with test results
• JSON Report: reports/cucumber-report.json - Machine-readable test results
• JUnit Report: reports/cucumber-report.xml - For CI/CD integration
• Screenshots: Captured automatically on test failures
• Videos: Recorded for failed test scenarios

To generate the HTML report after tests:

npm run test:report

Create a .env file from .env.example:

BASE_URL=https://www.slb.com
HEADLESS=true
SINGLE_SESSION=true  # Run all scenarios in one browser session (default: true)

Configuration Options:

• BASE_URL: The base URL for the application under test
• HEADLESS: Run browser in headless mode (true) or headed mode (false)
• SINGLE_SESSION: Run all scenarios in single browser session (true) or create new browser per scenario (false)
  • Default: true - Faster execution, lower resource usage
  • Set to false for complete isolation between scenarios

Performance Impact:

• SINGLE_SESSION=true: ~50-60% faster execution time
• SINGLE_SESSION=false: Complete scenario isolation, slower but ensures clean state

See SINGLE_SESSION_FEATURE.md for detailed documentation.

Modify playwright.config.ts to customize:

• Browsers (Chromium, Firefox, WebKit)
• Timeouts
• Screenshots and video settings
• Base URL
• Parallel execution

Modify cucumber.js to customize:

• Report formats
• Step definition paths
• Feature file locations
• Retry attempts

• Encapsulates page elements and actions
• Promotes code reusability and maintainability
• Reduces code duplication

• Human-readable test scenarios
• Collaboration between technical and non-technical stakeholders
• Living documentation

• Type safety and early error detection
• Better IDE support and autocomplete
• Improved code quality

• Page Objects: UI interactions
• Step Definitions: Test logic
• Feature Files: Test scenarios
• Support Files: Utilities and hooks

• Environment-based configuration
• Externalized test data
• Configurable base URLs

• Screenshots on failure
• Video recording for debugging
• Detailed error messages in reports

• ESLint for code linting
• Prettier for code formatting
• Consistent coding standards

• JUnit XML reports for integration
• Environment variable support
• Headless execution by default

• Automatic dismissal of OneTrust cookie consent on first page load
• Handled once in Before hook when browser starts
• No need for per-test cookie checks
• Cookies persist across entire test session
• Prevents test flakiness without performance overhead

• Step definitions focused on business logic
• No cookie handling code in tests
• Infrastructure concerns separated in hooks
• Easy to read and maintain

• ✅ Homepage loads successfully
• ✅ Main sections visibility verification
• ✅ Navigation menu interactions
• ✅ Contact page navigation

• ✅ Hero section content validation
• ✅ Company tagline verification
• ✅ CTA button presence checks

• ✅ Search panel opening
• ✅ Search input field availability
• ✅ Popular searches navigation
• ✅ Search query execution
• ✅ Results page validation

npm run lint

npm run lint:fix

npm run format

npm run clean

Create a new .feature file in the features/ directory:

Feature: Feature Name
  As a user
  I want to do something
  So that I can achieve a goal

  Scenario: Scenario name
    Given I am on the homepage
    When I click on a button
    Then I should see the result

Create a new page class in src/pages/:

import { Page } from '@playwright/test';
import { BasePage } from './BasePage';

export class MyPage extends BasePage {
  private readonly myElement = '#element';

  constructor(page: Page) {
    super(page);
  }

  async clickElement(): Promise<void> {
    await this.click(this.myElement);
  }
}

Create step definitions in src/steps/:

import { Given, When, Then } from '@cucumber/cucumber';
import { expect } from '@playwright/test';
import { MyPage } from '../pages/MyPage';
import { getPage } from '../support/browser';

let myPage: MyPage;

Given('I am on my page', async function () {
  const page = getPage();
  myPage = new MyPage(page);
  await myPage.navigate();
});

• Cookies are automatically accepted when browser first starts (Before hook)
• Check console logs for "✓ Initial page loaded and cookies accepted"
• If cookie banner persists, check src/utils/cookie-handler.ts
• Verify the OneTrust button selector is still valid
• Cookie acceptance happens once per session in single session mode

• Increase timeout in playwright.config.ts
• Check network connectivity
• Verify the website is accessible

• Reinstall browsers: npx playwright install
• Check system requirements
• Try running in headed mode: npm run test:headed

• Run npm install to ensure all dependencies are installed
• Check tsconfig.json configuration
• Verify all imports are correct

Create .github/workflows/tests.yml:

name: Test Automation

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npm run test:all
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: test-reports
          path: reports/

• Playwright Documentation
• Cucumber Documentation
• TypeScript Handbook
• Page Object Model Pattern

• TypeScript 5.9+: Type-safe test automation
• Playwright 1.57+: Cross-browser automation framework
• Cucumber 12.2+: BDD testing framework with Gherkin syntax
• Node.js 18+: JavaScript runtime

• ESLint: Code quality and style checking
• Prettier: Code formatting
• ts-node: TypeScript execution
• dotenv: Environment variable management

• multiple-cucumber-html-reporter: Rich HTML reports
• Cucumber JSON: Machine-readable test results
• JUnit XML: CI/CD integration format

• Page Object Model (POM): UI abstraction layer
• Behavior-Driven Development (BDD): Human-readable scenarios
• Separation of Concerns: Modular, maintainable codebase
• Configuration Management: Environment-based settings
• Robust Error Handling: Screenshots, HTML dumps, detailed logs

1. Follow the existing code style
2. Write meaningful test scenarios
3. Update documentation as needed
4. Run linting and formatting before committing
5. Ensure all tests pass

ISC

Test Automation Team

Happy Testing! 🚀