[playwright] Update documentation

Since a recent enhancement/refactoring of @theia/playwright, to permit using it in Theia
Electron applications, the way to load an application has changed. This commit is an
attempt to update the examples that are part of the documentation. I validated the changes
in the "theia-playwright-template" repository, and so I have adapted the sample code to
that repo's linting rules (using single quotes instead of double).

It's possible that other things have changed, that I have not yet encountered, but this
should be a good step forward, at least for those just getting started integrating
playwright to test their Theia-based app.

Signed-off-by: Marc Dumais <[email protected]>

examples/playwright/docs/EXTENSIBILITY.md

@@ -10,11 +10,11 @@ Commands and menu items are handled by their label, so no further customization
 Simply interact with them via the menu or quick commands.
 
 ```typescript
-const app = await TheiaApp.load(page);
+const app = await TheiaAppLoader.load({ playwright, browser });
 const menuBar = app.menuBar;
 
-const yourMenu = await menuBar.openMenu("Your Menu");
-const yourItem = await mainMenu.menuItemByName("Your Item");
+const yourMenu = await menuBar.openMenu('Your Menu');
+const yourItem = await mainMenu.menuItemByName('Your Item');
 
 expect(await yourItem?.hasSubmenu()).toBe(true);
 ```
@@ -30,14 +30,14 @@ export class MyTheiaApp extends TheiaApp {
 }
 
 export class MyToolbar extends TheiaPageObject {
-  selector = "div#myToolbar";
+  selector = 'div#myToolbar';
   async clickItem1(): Promise<void> {
     await this.page.click(`${this.selector} .item1`);
   }
 }
 
-const ws = new TheiaWorkspace(["src/tests/resources/sample-files1"]);
-const app = await MyTheiaApp.loadApp(page, MyTheiaApp, ws);
+const ws = new TheiaWorkspace(['src/tests/resources/sample-files1']);
+const app = await TheiaAppLoader.load({ playwright, browser }, ws, MyTheiaApp);
 await app.toolbar.clickItem1();
 ```
 
@@ -55,9 +55,9 @@ export class MyView extends TheiaView {
   constructor(public app: TheiaApp) {
     super(
       {
-        tabSelector: "#shell-tab-my-view", // the id of the tab
-        viewSelector: "#my-view-container", // the id of the view container
-        viewName: "My View", // the user visible view name
+        tabSelector: '#shell-tab-my-view', // the id of the tab
+        viewSelector: '#my-view-container', // the id of the view container
+        viewName: 'My View', // the user visible view name
       },
       app
     );
@@ -66,7 +66,7 @@ export class MyView extends TheiaView {
   async clickMyButton(): Promise<void> {
     await this.activate();
     const viewElement = await this.viewElement();
-    const button = await viewElement?.waitForSelector("#idOfMyButton");
+    const button = await viewElement?.waitForSelector('#idOfMyButton');
     await button?.click();
   }
 }
@@ -83,7 +83,7 @@ As an example, `MyView` above introduces a method that allows to click a button.
 To use this custom page object in a test, we pass our custom page object as a parameter when opening the view with `app.openView`.
 
 ```typescript
-const app = await TheiaApp.load(page, ws);
+const app = await TheiaAppLoader.load({ playwright, browser });
 const myView = await app.openView(MyView);
 await myView.clickMyButton();
 ```
@@ -94,7 +94,7 @@ As a reference for custom views and editors, please refer to the existing page o
 Custom status indicators are supported with the same mechanism. They are accessed via `TheiaApp.statusBar`.
 
 ```typescript
-const app = await TheiaApp.load(page);
+const app = await TheiaAppLoader.load({ playwright, browser });
 const problemIndicator = await app.statusBar.statusIndicator(
   TheiaProblemIndicator
 );

examples/playwright/docs/GETTING_STARTED.md

@@ -43,35 +43,35 @@ Using the `TheiaApp` instance, we open an editor of type `TheiaTextEditor`, whic
 At any time, we can also get information from the text editor, such as obtaining dirty state and verify whether this information is what we expect.
 
 ```typescript
-test("should undo and redo text changes and correctly update the dirty state", async () => {
+test('should undo and redo text changes and correctly update the dirty state', async ({ playwright, browser }) => {
     // 1. set up workspace contents and open Theia app
-    const ws = new TheiaWorkspace(["src/tests/resources/sample-files1"]);
-    const app = await TheiaApp.load(page, ws);
+    const ws = new TheiaWorkspace(['src/tests/resources/sample-files1']);
+    app = await TheiaAppLoader.load( { playwright, browser }, ws);
 
     // 2. open Theia text editor
     const sampleTextEditor = await app.openEditor(
-        "sample.txt",
+        'sample.txt',
         TheiaTextEditor
     );
 
     // 3. make a change and verify contents and dirty
-    await sampleTextEditor.replaceLineWithLineNumber("change", 1);
+    await sampleTextEditor.replaceLineWithLineNumber('change', 1);
     expect(await sampleTextEditor.textContentOfLineByLineNumber(1)).toBe(
-        "change"
+        'change'
     );
     expect(await sampleTextEditor.isDirty()).toBe(true);
 
     // 4. undo and verify contents and dirty state
     await sampleTextEditor.undo(2);
     expect(await sampleTextEditor.textContentOfLineByLineNumber(1)).toBe(
-        "this is just a sample file"
+        'this is just a sample file'
     );
     expect(await sampleTextEditor.isDirty()).toBe(false);
 
     // 5. undo and verify contents and dirty state
     await sampleTextEditor.redo(2);
     expect(await sampleTextEditor.textContentOfLineByLineNumber(1)).toBe(
-        "change"
+        'change'
     );
     expect(await sampleTextEditor.isDirty()).toBe(true);
 
@@ -81,9 +81,9 @@ test("should undo and redo text changes and correctly update the dirty state", a
     await sampleTextEditor.close();
 
     // 7. reopen editor and verify dirty state
-    const reopenedEditor = await app.openEditor("sample.txt", TheiaTextEditor);
+    const reopenedEditor = await app.openEditor('sample.txt', TheiaTextEditor);
     expect(await reopenedEditor.textContentOfLineByLineNumber(1)).toBe(
-        "change"
+        'change'
     );
 
     await reopenedEditor.close();