[infra] Use macos runners for some CI jobs

.github/workflows/check-links.yml

@@ -4,7 +4,7 @@ on: [push, pull_request]
 
 jobs:
   check-links:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     timeout-minutes: 10
     steps:
       - uses: google/wireit@setup-github-actions-caching/v1

.github/workflows/integration-tests.yml

@@ -4,7 +4,7 @@ on: [push, pull_request]
 
 jobs:
   integration-tests:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     timeout-minutes: 10
     steps:
       - uses: google/wireit@setup-github-actions-caching/v1

.github/workflows/unit-tests.yml

@@ -4,7 +4,7 @@ on: [push, pull_request]
 
 jobs:
   unit-tests:
-    runs-on: ubuntu-latest
+    runs-on: macos-latest
     timeout-minutes: 10
     steps:
       - uses: google/wireit@setup-github-actions-caching/v1

.gitignore

@@ -22,6 +22,9 @@ packages/lit-dev-api/api-data/*/INSTALLED
 # We only want to keep '-linux' screenshots which are tested by Github Actions.
 packages/lit-dev-tests/src/playwright/**/*.png
 !packages/lit-dev-tests/src/playwright/**/*-linux.png
+# We are also keeping '-darwin' screenshots as we switch to macos runners in
+# Github Actions as a fix for https://github.com/lit/lit.dev/issues/1201
+!packages/lit-dev-tests/src/playwright/**/*-darwin.png
 test-results
 
 *.tsbuildinfo

packages/lit-dev-tests/src/playwright.config.ts

@@ -25,5 +25,6 @@ const config: PlaywrightTestConfig = {
   //    committing the snapshot to the repository.
   //  * `npm run test:integration:update-golden-screenshots` for local testing.
   updateSnapshots: 'none',
+  workers: process.env.CI ? 1 : 2,
 };
 export default config;

packages/lit-dev-tests/src/playwright/playground.spec.ts

@@ -16,6 +16,9 @@ import {
 
 import type {Page, Browser} from '@playwright/test';
 
+const isMacOS = process.platform === 'darwin';
+const modifierKey = isMacOS ? 'Meta' : 'Control';
+
 const signInToGithub = async (page: Page): Promise<void> => {
   const [popup] = await Promise.all([
     page.waitForEvent('popup'),
@@ -118,7 +121,7 @@ test.describe('Playground', () => {
 
     // Type some new content
     await page.click('playground-code-editor');
-    await page.keyboard.press('Control+A');
+    await page.keyboard.press(`${modifierKey}+A`);
     await page.keyboard.type('"my long url content";');
     await waitForPlaygroundPreviewToLoad(page);
 
@@ -149,10 +152,11 @@ test.describe('Playground', () => {
 
   test('share gist', async ({page}) => {
     await page.goto('/playground/');
+    await waitForPlaygroundPreviewToLoad(page);
 
     // Type some new content
     await page.click('playground-code-editor');
-    await page.keyboard.press('Control+A');
+    await page.keyboard.press(`${modifierKey}+A`);
     await page.keyboard.type('"my gist content";');
     await waitForPlaygroundPreviewToLoad(page);
 
@@ -194,15 +198,15 @@ test.describe('Playground', () => {
 
     // Type some more content
     await page.click('playground-code-editor');
-    await page.keyboard.press('Control+A');
+    await page.keyboard.press(`${modifierKey}+A`);
     await page.keyboard.type('"my updated gist content";');
 
     // Rename a file
     await page.hover('text=simple-greeting.ts');
     await page.click('text=simple-greeting.ts >> .menu-button');
     await page.click('#renameButton');
     await page.click('.filename-input');
-    await page.keyboard.press('Control+A');
+    await page.keyboard.press(`${modifierKey}+A`);
     await page.keyboard.type('new-name.ts');
     await expect(await page.screenshot()).toMatchSnapshot(
       'shareGist-5-renamingFile.png'
@@ -254,7 +258,7 @@ test.describe('Playground', () => {
     await waitForPlaygroundPreviewToLoad(page);
 
     // On the first Ctrl+S, the share menu opens and we click the copy button
-    await page.keyboard.press('Control+S');
+    await page.keyboard.press(`${modifierKey}+S`);
     await page.waitForSelector('litdev-playground-share-button litdev-flyout', {
       state: 'visible',
     });
@@ -265,12 +269,12 @@ test.describe('Playground', () => {
 
     // Change the content
     await page.click('playground-code-editor');
-    await page.keyboard.press('Control+A');
+    await page.keyboard.press(`${modifierKey}+A`);
     await page.keyboard.type('"new content";');
     await waitForPlaygroundPreviewToLoad(page);
 
     // On the next Ctrl+S, the long URL share should happen automatically
-    await page.keyboard.press('Control+S');
+    await page.keyboard.press(`${modifierKey}+S`);
     await page.waitForURL(
       (url) => url.href.match(/#project=/) !== null && url.href !== firstUrl
     );
@@ -282,7 +286,7 @@ test.describe('Playground', () => {
     await waitForPlaygroundPreviewToLoad(page);
 
     // On the first Ctrl+S, the share menu opens and we click the new gist button
-    await page.keyboard.press('Control+S');
+    await page.keyboard.press(`${modifierKey}+S`);
     await page.waitForSelector('litdev-playground-share-button litdev-flyout', {
       state: 'visible',
     });
@@ -295,12 +299,12 @@ test.describe('Playground', () => {
 
     // Change the content
     await page.click('playground-code-editor');
-    await page.keyboard.press('Control+A');
+    await page.keyboard.press(`${modifierKey}+A`);
     await page.keyboard.type('"new content";');
     await waitForPlaygroundPreviewToLoad(page);
 
     // On the next Ctrl+S, the new gist should be updated automatically
-    await page.keyboard.press('Control+S');
+    await page.keyboard.press(`${modifierKey}+S`);
     expect(page.url()).toEqual(firstUrl);
     expect(await readClipboardText(page)).toMatch(firstUrl);
   });
@@ -375,7 +379,7 @@ test.describe('Playground', () => {
 
     // Type some new content
     await page.click('playground-code-editor');
-    await page.keyboard.press('Control+A');
+    await page.keyboard.press(`${modifierKey}+A`);
     await page.keyboard.type('"my gist content";');
     await waitForPlaygroundPreviewToLoad(page);