Add Page Object Support

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-    "window.zoomLevel": 0,
     "editor.tabSize": 2,
     "files.exclude": {
         "**/.DS_Store": true,

README.md

@@ -15,6 +15,7 @@ This repository is based on the [Cucumber-typescript-starter](https://github.com
 - Launching new context and page for each scenario
 - Running feature with video recording option
 - Report generated with last good image attached
+- Page Object Design Pattern
 - Utilies function to help you with writing steps
 - VScode configuration to debug a single feature or an only scenario (run when located on the feature file)
 
@@ -36,7 +37,7 @@ On Linux and Mac you can write:
 
 `BROWSER=firefox npm run test` or `BROWSER=firefox npx cucumber-js` runs all tests using Firefox
 
-One Windows you need to write
+On Windows you need to write
 
 ```
 set BROWSER=firefox

config.ts

@@ -0,0 +1,10 @@
+const config = {
+  baseUrl: process.env.BASE_URL || 'https://playwright.dev',
+  recordVideos: process.env.PWVIDEO || false,
+  browser: process.env.BROWSER || 'chromium', // chromium or firefox or webkit
+  defaultTimeout: 60 * 1000, // milliseconds
+  runHeadless: true,
+  runSlow: 0, // milliseconds
+};
+
+export default config;

features/playwright.feature

@@ -1,12 +1,18 @@
 @foo
 Feature: Playwright docs
+  As a normal user
+  I want to select which background theme I like
+  So that I get to browse more comfortably
 
   Background: Navigation
-    Given Go to the playwright website
+    Given I go to the playwright website
 
-  Scenario: Change theme
-    When Change theme to "light" mode
-    Then Snapshot
-    When Change theme to "dark" mode
-    Then Snapshot
+  Scenario Outline: Changing theme to <theme> mode
+    When I change the theme to "<theme>" mode
+    Then I see the background color "<color>"
+    And Snapshot "theme <theme>"
 
+    Examples:
+      | theme | color              |
+      | light | rgb(255, 255, 255) |
+      | dark  | rgb(36, 37, 38)    |