review changes

packages/create-playwright/assets/examples/1-getting-started.spec.ts

@@ -6,7 +6,14 @@ import { test, expect } from '@playwright/test';
  * @see https://playwright.dev/docs/api/class-page
  */
 test('basic test', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
-  await page.locator('text=Get started').click();
-  await expect(page).toHaveTitle(/Getting started/);
+  await page.goto('https://todomvc.com/examples/vanilla-es6/');
+
+  const inputBox = page.locator('input.new-todo');
+  const todoList = page.locator('.todo-list');
+
+  await inputBox.fill('Learn Playwright');
+  await inputBox.press('Enter');
+  await expect(todoList).toHaveText('Learn Playwright');
+  await page.locator('text=Completed').click();
+  await expect(todoList).not.toHaveText('Learn Playwright');
 });

packages/create-playwright/assets/examples/2-actions.spec.ts

@@ -11,14 +11,26 @@ test.beforeEach(async ({ page }) => {
  * @see https://playwright.dev/docs/api/class-locator
  */
 test('basic interaction', async ({ page }) => {
-  const inputBox = page.locator('input.new-todo');
-  const todoList = page.locator('.todo-list');
-
-  await inputBox.fill('Learn Playwright');
-  await inputBox.press('Enter');
-  await expect(todoList).toHaveText('Learn Playwright');
-  await page.click('text=Completed');
-  await expect(todoList).not.toHaveText('Learn Playwright');
+  await test.step('with locators', async () => {
+    const inputBox = page.locator('input.new-todo');
+    const todoList = page.locator('.todo-list');
+
+    await inputBox.fill('Learn Playwright');
+    await inputBox.press('Enter');
+    await expect(todoList).toHaveText('Learn Playwright');
+    await page.locator('text=Completed').click();
+    await expect(todoList).not.toHaveText('Learn Playwright');
+  });
+
+  // Using locators gives you the ability of re-using the same selector mulitple
+  // times and they have also strictMode enabled by default. This option will
+  // throw an error if the selector will resolve to multiple elements. So above
+  // would be the same as the following:
+  await test.step('without locators', async () => {
+    await page.fill('input.new-todo', 'Learn Playwright');
+    await page.press('input.new-todo', 'Enter');
+    await page.click('text=Completed');
+  });
 });
 
 /**
@@ -31,6 +43,9 @@ test('element selectors', async ({ page }) => {
   // So the selector above is the same as the following:
   await page.press('css=.header input', 'Enter');
 
+  // select by text with the text selector engine:
+  await page.click('text=Active');
+
   // css allows you to select by attribute:
   await page.click('[id="toggle-all"]');
 

packages/create-playwright/assets/examples/5-networking.spec.ts

@@ -1,9 +1,9 @@
 import { test, expect } from '@playwright/test';
 
 /**
- * This text clicks on an element with the text 'Load user' and waits for a
- * specific HTTP response. This response contains in that case a JSON body
- * where we assert some properties.
+ * This test clicks on an element with the text 'Load user' and waits for a
+ * specific HTTP response. This response contains a JSON body where we assert
+ * some properties.
  */
 test('should be able to read a response body', async ({ page }) => {
   await page.goto('/network.html');

packages/create-playwright/assets/examples/README.md

@@ -0,0 +1,8 @@
+# Playwright examples
+
+This directory contains examples for Playwright. Run them with the following command:
+
+```sh
+npm run test:e2e-examples
+yarn test:e2e-examples
+```

packages/create-playwright/assets/examples/playwright.config.ts

@@ -5,7 +5,7 @@ const config: PlaywrightTestConfig = {
   // Run your local dev server before starting the tests:
   // https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
   webServer: {
-    command: 'node ./0-server',
+    command: 'node ./server',
     port: 4345,
     cwd: __dirname,
   },

packages/create-playwright/assets/examples/5-pom/2-pom-fixtures.ts → packages/create-playwright/assets/examples/pom/fixtures.ts

@@ -1,5 +1,5 @@
 import { test as base } from '@playwright/test';
-import { TodoPage } from './todo.pom';
+import { TodoPage } from './todoPage.pom';
 
 /**
  * This adds a todoPage fixture which has access to the page instance

packages/create-playwright/assets/examples/5-pom/2-pom-fixtures.spec.ts → packages/create-playwright/assets/examples/pom/pom-with-fixtures.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from './2-pom-fixtures';
+import { test, expect } from './fixtures';
 
 test.beforeEach(async ({ todoPage }) => {
   await todoPage.goto();

packages/create-playwright/assets/examples/5-pom/1-pom.spec.ts → packages/create-playwright/assets/examples/pom/pom.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from '@playwright/test';
-import { TodoPage } from './todo.pom';
+import { TodoPage } from './todoPage.pom';
 
 test.describe('ToDo App', () => {
   test('should display zero initial items', async ({ page }) => {

packages/create-playwright/assets/examples/0-server/index.js → packages/create-playwright/assets/examples/server/index.js

@@ -1,18 +1,3 @@
-/**
- * Copyright (c) Microsoft Corporation.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 // @ts-check
 const path = require('path');
 const http = require('http');

packages/create-playwright/tests/integration.spec.ts

@@ -79,7 +79,7 @@ for (const packageManager of ['npm', 'yarn'] as ('npm' | 'yarn')[]) {
 
       expect(fs.existsSync(path.join(dir, 'playwright.config.ts'))).toBeTruthy();
       expect(fs.existsSync(path.join(dir, 'tests-examples/playwright.config.ts'))).toBeTruthy();
-      expect(fs.existsSync(path.join(dir, 'tests-examples/0-server/index.js'))).toBeTruthy();
+      expect(fs.existsSync(path.join(dir, 'tests-examples/server/index.js'))).toBeTruthy();
       expect(fs.existsSync(path.join(dir, 'tests-examples/1-getting-started.spec.ts'))).toBeTruthy();
 
       let result;