Complete Playwright + JavaScript + BDD
(Cucumber) Handbook
This handbook is designed as a learning guide for QA Automation engineers. It covers the concepts
most commonly used in real-world Playwright projects.
1. Playwright Overview
Playwright is a modern end-to-end automation framework supporting Chromium, Firefox and
WebKit. It provides auto-waiting, cross-browser support, network interception, screenshots, tracing,
parallel execution and API testing.
2. Project Structure
Typical folders:
tests/, pages/, fixtures/, utils/, data/, hooks/, config/, reports/, screenshots/.
BDD projects additionally include features/, step-definitions/, support/.
3. Locators
Recommended order:
• getByRole()
• getByTestId()
• getByLabel()
• getByPlaceholder()
• getByText()
• locator(CSS)
• XPath (last choice)
Important locator APIs:
click(), fill(), type(), press(), check(), uncheck(), selectOption(), hover(), dblclick(), dragTo(), clear(),
focus(), blur(), first(), last(), nth(), filter(), locator(), count(), textContent(), innerText(), innerHTML(),
inputValue(), getAttribute(), isVisible(), isHidden(), isEnabled(), isDisabled(), isChecked().
4. Assertions
Frequently used assertions:
toBeVisible(), toBeHidden(), toBeEnabled(), toBeDisabled(), toHaveText(), toContainText(),
toHaveValue(), toHaveAttribute(), toHaveCount(), toHaveURL(), toHaveTitle(), toBeChecked(),
toHaveClass().
5. Page Methods
goto(), reload(), goBack(), goForward(), title(), url(), waitForURL(), waitForLoadState(),
screenshot(), pdf(), close(), pause().
6. Fixtures
Fixtures create reusable setup and teardown logic. Common fixtures:
browser, context, page, authenticated user, test data, API client, database connection.
Use custom fixtures to avoid duplicate code.
7. Hooks
Playwright Test:
beforeAll()
afterAll()
beforeEach()
afterEach()
BDD Hooks:
Before
After
BeforeAll
AfterAll
BeforeStep
AfterStep
8. Frames & iFrames
Use frameLocator() for iframe interaction.
Locate the frame first, then interact with elements inside it.
9. Multiple Tabs / Windows
Use [Link]('page') to capture newly opened tabs.
Switch between pages using the returned page object.
10. Popups & Alerts
Dialogs:
accept()
dismiss()
prompt handling
Browser popups can be captured using page events.
11. File Upload & Download
setInputFiles() uploads files.
waitForEvent('download') captures downloads.
12. Mouse & Keyboard
[Link](), [Link](), [Link](), [Link]()
[Link](), type(), down(), up(), insertText().
13. Network
route() intercepts requests.
fulfill() mocks responses.
continue() forwards request.
abort() blocks request.
14. API Testing
[Link]()
post()
put()
patch()
delete()
Validate response status, headers and JSON body.
15. Authentication
Reuse authentication state with storageState.
Avoid logging in before every test.
16. Screenshots, Videos & Traces
Capture screenshots on failure.
Enable tracing for debugging.
Store videos for failed tests.
17. Parallel Execution
Configure workers and projects in [Link] for parallel browser execution.
18. Page Object Model (POM)
Create one class per page.
Keep locators and actions inside page classes.
Tests should call page methods instead of raw locators.
19. BDD Cucumber Framework
Folders:
features/
step-definitions/
pages/
hooks/
fixtures/
utils/
Feature File Keywords:
Feature
Background
Scenario
Scenario Outline
Examples
Given
When
Then
And
But
Step Definitions map Gherkin steps to Playwright code.
Use Before/After hooks for browser setup and cleanup.
Keep business logic in Page Objects.
20. Reporting
Common reporters:
HTML
Allure
JUnit
JSON
Screenshots
Videos
Trace Viewer
21. Best Practices
Prefer getByRole().
Avoid hard waits.
Use explicit assertions.
Keep tests independent.
Reuse fixtures.
Use data-testid when available.
Use POM and reusable utilities.
Run tests in CI/CD.
22. Interview Topics
Expect questions on:
Locators
Auto waiting
Fixtures
Hooks
Assertions
Frames
Tabs
Network mocking
API testing
POM
BDD
Parallel execution
Retry mechanism
Trace Viewer
CI/CD integration
Learning Roadmap
Week 1: JavaScript basics
Week 2: Playwright installation, locators, assertions
Week 3: Page methods, waits, POM
Week 4: Fixtures, hooks, reports
Week 5: Frames, tabs, uploads, downloads
Week 6: API, network, authentication
Week 7: Cucumber BDD integration
Week 8: Real-world framework and CI/CD