diff --git a/e2e-tests/development-runtime/.gitignore b/e2e-tests/development-runtime/.gitignore index 3cbf65216661d..b98e14052be21 100644 --- a/e2e-tests/development-runtime/.gitignore +++ b/e2e-tests/development-runtime/.gitignore @@ -76,3 +76,6 @@ cypress/videos __history__.json src/gatsby-types.d.ts +/test-results/ +/playwright-report/ +/playwright/.cache/ diff --git a/e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-inline-scripts.js b/e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-inline-scripts.js index edf2ab64d53c2..fede6159c61c7 100644 --- a/e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-inline-scripts.js +++ b/e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-inline-scripts.js @@ -94,8 +94,8 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { }) it(`should load only once after the page is refreshed`, () => { - cy.visit(page.target) - cy.reload() + cy.visit(page.target).waitForRouteChange() + cy.reload().url().should(`contain`, page.target) cy.get(`table[id=script-mark-records] tbody`) .children() @@ -131,8 +131,9 @@ for (const { descriptor, inlineScriptType } of typesOfInlineScripts) { }) it(`should load only once if the page is revisited via browser back/forward buttons after anchor link navigation`, () => { - cy.visit(page.navigation) + cy.visit(page.navigation).waitForRouteChange() cy.get(`a[href="${page.target}"][id=anchor-link]`).click() + cy.get(`table[id=script-mark-records] tbody`) // Make sure history has time to change cy.go(`back`) cy.go(`forward`) diff --git a/e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-scripts-with-sources.js b/e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-scripts-with-sources.js index 16170202b6f92..5a7652153e92d 100644 --- a/e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-scripts-with-sources.js +++ b/e2e-tests/development-runtime/cypress/integration/gatsby-script/gatsby-script-scripts-with-sources.js @@ -78,7 +78,7 @@ describe(`scripts with sources`, () => { cy.get(`table[id=script-resource-records] tbody`) .children() - .should(`have.length`, 3) + .should(`have.length`, 5) cy.getRecord(script.three, `strategy`, true).should( `equal`, `post-hydrate` @@ -92,7 +92,7 @@ describe(`scripts with sources`, () => { cy.get(`table[id=script-resource-records] tbody`) .children() - .should(`have.length`, 3) + .should(`have.length`, 5) cy.getRecord(script.three, `strategy`, true).should( `equal`, `post-hydrate` @@ -107,7 +107,7 @@ describe(`scripts with sources`, () => { cy.get(`table[id=script-resource-records] tbody`) .children() - .should(`have.length`, 3) + .should(`have.length`, 5) cy.getRecord(script.three, `strategy`, true).should( `equal`, `post-hydrate` @@ -123,7 +123,7 @@ describe(`scripts with sources`, () => { cy.get(`table[id=script-resource-records] tbody`) .children() - .should(`have.length`, 3) + .should(`have.length`, 5) cy.getRecord(script.three, `strategy`, true).should( `equal`, `post-hydrate` @@ -138,7 +138,7 @@ describe(`scripts with sources`, () => { cy.get(`table[id=script-resource-records] tbody`) .children() - .should(`have.length`, 3) + .should(`have.length`, 5) cy.getRecord(script.three, `strategy`, true).should( `equal`, `post-hydrate` @@ -154,7 +154,7 @@ describe(`scripts with sources`, () => { cy.get(`table[id=script-resource-records] tbody`) .children() - .should(`have.length`, 3) + .should(`have.length`, 5) cy.getRecord(script.three, `strategy`, true).should( `equal`, `post-hydrate` diff --git a/e2e-tests/development-runtime/gatsby-config.js b/e2e-tests/development-runtime/gatsby-config.js index 9ccc5806d1583..13d43473d4f25 100644 --- a/e2e-tests/development-runtime/gatsby-config.js +++ b/e2e-tests/development-runtime/gatsby-config.js @@ -36,10 +36,7 @@ module.exports = { { resolve: `gatsby-transformer-remark`, options: { - plugins: [ - `gatsby-remark-subcache`, - `gatsby-remark-images` - ], + plugins: [`gatsby-remark-subcache`, `gatsby-remark-images`], }, }, `gatsby-plugin-sharp`, @@ -63,4 +60,5 @@ module.exports = { // To learn more, visit: https://gatsby.dev/offline // 'gatsby-plugin-offline', ], + partytownProxiedURLs: [`https://unpkg.com/three@0.139.1/build/three.js`], } diff --git a/e2e-tests/development-runtime/package.json b/e2e-tests/development-runtime/package.json index 04e03301b36f7..0b9eda2fe591d 100644 --- a/e2e-tests/development-runtime/package.json +++ b/e2e-tests/development-runtime/package.json @@ -49,12 +49,19 @@ "update:webhook": "node scripts/webhook.js", "update:cms-webhook": "node scripts/cms-webhook.js", "update:preview": "curl -X POST -d \"{ \\\"fake-data-update\\\": true }\" -H \"Content-Type: application/json\" http://localhost:8000/__refresh", - "start-server-and-test": "start-server-and-test develop http://localhost:8000 cy:run", + "start-server-and-test": "start-server-and-test develop http://localhost:8000 combined", "start-server-and-test:locally": "start-server-and-test develop http://localhost:8000 cy:open", "cy:open": "cypress open", - "cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome" + "cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome", + "playwright": "playwright test --project=chromium", + "playwright:debug": "playwright test --project=chromium --debug", + "start-server-and-test:playwright": "start-server-and-test develop http://localhost:8000 playwright", + "start-server-and-test:playwright-debug": "start-server-and-test develop http://localhost:8000 playwright:debug", + "combined": "npm run playwright && npm run cy:run", + "postinstall": "playwright install chromium" }, "devDependencies": { + "@playwright/test": "^1.22.0", "@testing-library/cypress": "^7.0.0", "cross-env": "^5.2.0", "cypress": "6.1.0", diff --git a/e2e-tests/development-runtime/playwright.config.ts b/e2e-tests/development-runtime/playwright.config.ts new file mode 100644 index 0000000000000..ddaffc935a26d --- /dev/null +++ b/e2e-tests/development-runtime/playwright.config.ts @@ -0,0 +1,57 @@ +import type { PlaywrightTestConfig } from "@playwright/test" +import { devices } from "@playwright/test" + +/** + * Read environment variables from file. + * https://github.com/motdotla/dotenv + */ +// require('dotenv').config(); + +/** + * See https://playwright.dev/docs/test-configuration. + */ +const config: PlaywrightTestConfig = { + testDir: "./playwright", + /* Maximum time one test can run for. */ + timeout: 30 * 1000, + expect: { + /** + * Maximum time expect() should wait for the condition to be met. + * For example in `await expect(locator).toHaveText();` + */ + timeout: 5000, + }, + /* Fail the build on CI if you accidentally left test.only in the source code. */ + forbidOnly: !!process.env.CI, + /* Retry on CI only */ + retries: process.env.CI ? 2 : 0, + /* Opt out of parallel tests on CI. */ + workers: process.env.CI ? 1 : undefined, + /* Reporter to use. See https://playwright.dev/docs/test-reporters */ + reporter: "html", + /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ + use: { + /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */ + actionTimeout: 0, + /* Base URL to use in actions like `await page.goto('/')`. */ + baseURL: "http://localhost:8000", + + /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */ + trace: "on-first-retry", + }, + + /* Configure projects for major browsers */ + projects: [ + { + name: "chromium", + use: { + ...devices["Desktop Chrome"], + }, + }, + ], + + /* Folder for test artifacts such as screenshots, videos, traces, etc. */ + // outputDir: 'test-results/', +} + +export default config diff --git a/e2e-tests/development-runtime/playwright/gatsby-script-off-main-thread.spec.ts b/e2e-tests/development-runtime/playwright/gatsby-script-off-main-thread.spec.ts new file mode 100644 index 0000000000000..4a1cef1c08e17 --- /dev/null +++ b/e2e-tests/development-runtime/playwright/gatsby-script-off-main-thread.spec.ts @@ -0,0 +1,27 @@ +import { test, expect } from "@playwright/test" + +const id = { + templateLiteral: `inline-script-template-literal-mutation`, + dangerouslySet: `inline-script-dangerously-set-mutation`, +} + +test.describe(`off-main-thread scripts`, () => { + test(`should load successfully`, async ({ page }) => { + await page.goto(`/gatsby-script-off-main-thread/`) + + // @ts-ignore + const scriptWithSrc = await page.evaluate(() => typeof THREE === `function`) + + const templateLiteral = await page + .locator(`[id=${id.templateLiteral}]`) + .textContent() + + const dangerouslySet = await page + .locator(`[id=${id.dangerouslySet}]`) + .textContent() + + await expect(scriptWithSrc).toBeTruthy() + await expect(templateLiteral).toEqual(`${id.templateLiteral}: success`) + await expect(dangerouslySet).toEqual(`${id.dangerouslySet}: success`) + }) +}) diff --git a/e2e-tests/development-runtime/src/pages/gatsby-script-off-main-thread.js b/e2e-tests/development-runtime/src/pages/gatsby-script-off-main-thread.js new file mode 100644 index 0000000000000..a6387e0dd2cc0 --- /dev/null +++ b/e2e-tests/development-runtime/src/pages/gatsby-script-off-main-thread.js @@ -0,0 +1,44 @@ +import * as React from "react" +import { Script } from "gatsby" +import { scripts } from "../../gatsby-script-scripts" + +function OffMainThreadScripts() { + return ( +
+

Script component e2e test

+ +
+

Scripts with sources

+ + + + + +