diff --git a/packages/site/package.json b/packages/site/package.json index 1c6a822..e3328a5 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -8,10 +8,12 @@ "dev": "next dev", "build": "next build", "test:cypress": "cypress run --browser=replay-chromium", - "test:playwright": "playwright test" + "test:playwright": "playwright test --project replay-chromium --headed --reporter=@replayio/playwright/reporter" }, "dependencies": { "@replayio/overboard": "*", + "axios": "^1.6.8", + "dotenv": "^16.4.5", "next": "^12.2.4", "next-transpile-modules": "^9.0.0", "react": "*", @@ -20,11 +22,11 @@ "webpack-react-component-name": "^5.0.4" }, "devDependencies": { - "@playwright/test": "^1.42.1", - "@replayio/playwright": "^2.0.0-alpha.9", + "@playwright/test": "1.37.0", "@replayio/cypress": "^1.7.20", + "@replayio/playwright": "^2.0.0-alpha.9", "@types/node": "^20.12.2", "cypress": "^12.14.0", "webpack": "^5.75.0" } -} \ No newline at end of file +} diff --git a/packages/site/playwright-tests/example.spec.ts b/packages/site/playwright-tests/example.spec.ts index a7ab774..b16f8c6 100644 --- a/packages/site/playwright-tests/example.spec.ts +++ b/packages/site/playwright-tests/example.spec.ts @@ -1,24 +1,40 @@ -import { test, expect } from '@playwright/test'; +// import test, { expect } from "../testFixtureTestSuiteDashboard"; +import { test, expect, Page } from '@playwright/test'; -test('sets a color', async ({ page }) => { +async function selectColor(page: Page, color: "blue" | "green" | "red") { + await page.locator(`[data-cy=${color}]`).click(); +} + +async function addToCart(page: Page) { + await page.locator(`[data-cy=AddToCartButton]`).click(); +} + +async function verifyAddToCartDidNotFail(page) { + const errorElement = await page.locator('[data-cy=AddToCartButtonError]'); + await expect(errorElement).toHaveCount(0); +} + +// test.use({ testRunState: "SUCCESS_IN_MAIN_WITH_SOURCE" }); + +test('select color', async ({ page }) => { + // test('select color', async ({ pageWithMeta: { page } }) => { await page.goto('http://localhost:3000'); - // Click the get started link. - await page.locator('[data-cy=blue]').click(); - await page.locator('[data-cy=green]').click(); + await selectColor(page, "blue") + await selectColor(page, "green") }); +// test('can buy board', async ({ pageWithMeta: { page } }) => { test('can buy board', async ({ page }) => { await page.goto('http://localhost:3000'); - await page.locator('[data-cy=blue]').click(); - await page.locator('[data-cy=green]').click(); - await page.locator('[data-cy=AddToCartButton]').click(); + await selectColor(page, "blue") + await selectColor(page, "green") + await selectColor(page, "blue") + await addToCart(page) // Wait for any potential network requests or changes after clicking the button await page.waitForTimeout(1_000); - - const errorElement = await page.locator('[data-cy=AddToCartButtonError]'); - await expect(errorElement).toHaveCount(0); -}) \ No newline at end of file + await verifyAddToCartDidNotFail(page); +}); \ No newline at end of file diff --git a/packages/site/playwright.config.ts b/packages/site/playwright.config.ts index d990c9d..0a874ad 100644 --- a/packages/site/playwright.config.ts +++ b/packages/site/playwright.config.ts @@ -1,6 +1,10 @@ import { devices, PlaywrightTestConfig, defineConfig } from '@playwright/test'; import { devices as replayDevices } from "@replayio/playwright"; +import dotenv from 'dotenv'; +dotenv.config({ path: '.env' }); + + /** * Read environment variables from file. * https://github.com/motdotla/dotenv @@ -22,7 +26,7 @@ const config: PlaywrightTestConfig = defineConfig({ workers: process.env.CI ? 1 : undefined, /* Reporter to use. See https://playwright.dev/docs/test-reporters */ reporter: [ - ['html'], + ['line'], [ "@replayio/playwright/reporter", { diff --git a/yarn.lock b/yarn.lock index bbd4f82..e367322 100644 --- a/yarn.lock +++ b/yarn.lock @@ -582,12 +582,15 @@ resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz#323d72dd25103d0c4fbdce89dadf574a787b1f9b" integrity sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ== -"@playwright/test@^1.42.1": - version "1.42.1" - resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.42.1.tgz#9eff7417bcaa770e9e9a00439e078284b301f31c" - integrity sha512-Gq9rmS54mjBL/7/MvBaNOBwbfnh7beHvS6oS4srqXFcQHpQCV1+c8JXWE8VLPyRDhgS3H8x8A7hztqI9VnwrAQ== +"@playwright/test@1.37.0": + version "1.37.0" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.37.0.tgz#5b3b60dabaabc0d5d3021fb5a5bb8250b424c71d" + integrity sha512-181WBLk4SRUyH1Q96VZl7BP6HcK0b7lbdeKisn3N/vnjitk+9HbdlFz/L5fey05vxaAhldIDnzo8KUoy8S3mmQ== dependencies: - playwright "1.42.1" + "@types/node" "*" + playwright-core "1.37.0" + optionalDependencies: + fsevents "2.3.2" "@popmotion/easing@^1.0.1": version "1.0.2" @@ -1043,6 +1046,15 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.12.0.tgz#ce1c9d143389679e253b314241ea9aa5cec980d3" integrity sha512-NmWvPnx0F1SfrQbYwOi7OeaNGokp9XhzNioJ/CSBs8Qa4vxug81mhJEAVZwxXuBmYB5KDRfMq/F3RR0BIU7sWg== +axios@^1.6.8: + version "1.6.8" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.8.tgz#66d294951f5d988a00e87a0ffb955316a619ea66" + integrity sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ== + dependencies: + follow-redirects "^1.15.6" + form-data "^4.0.0" + proxy-from-env "^1.1.0" + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" @@ -1260,7 +1272,7 @@ colorette@^2.0.16: resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a" integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w== -combined-stream@^1.0.6, combined-stream@~1.0.6: +combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6: version "1.0.8" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== @@ -1408,6 +1420,11 @@ delayed-stream@~1.0.0: resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== +dotenv@^16.4.5: + version "16.4.5" + resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f" + integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg== + duplexer@~0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6" @@ -1653,6 +1670,11 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" +follow-redirects@^1.15.6: + version "1.15.6" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" + integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== + for-each@^0.3.3: version "0.3.3" resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.3.tgz#69b447e88a0a5d32c3e7084f3f1710034b21376e" @@ -1665,6 +1687,15 @@ forever-agent@~0.6.1: resolved "https://registry.yarnpkg.com/forever-agent/-/forever-agent-0.6.1.tgz#fbc71f0c41adeb37f96c577ad1ed42d8fdacca91" integrity sha512-j0KLYPhm6zeac4lz3oJ3o65qvgQCcPubiyotZrXqEaG4hNagNYO8qdlUrX5vwqv9ohqeT/Z3j6+yW067yWWdUw== +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + form-data@~2.3.2: version "2.3.3" resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6" @@ -2514,19 +2545,10 @@ pify@^4.0.1: resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231" integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g== -playwright-core@1.42.1: - version "1.42.1" - resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.42.1.tgz#13c150b93c940a3280ab1d3fbc945bc855c9459e" - integrity sha512-mxz6zclokgrke9p1vtdy/COWBH+eOZgYUVVU34C73M+4j4HLlQJHtfcqiqqxpP0o8HhMkflvfbquLX5dg6wlfA== - -playwright@1.42.1: - version "1.42.1" - resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.42.1.tgz#79c828b51fe3830211137550542426111dc8239f" - integrity sha512-PgwB03s2DZBcNRoW+1w9E+VkLBxweib6KTXM0M3tkiT4jVxKSi6PmVJ591J+0u10LUrgxB7dLRbiJqO5s2QPMg== - dependencies: - playwright-core "1.42.1" - optionalDependencies: - fsevents "2.3.2" +playwright-core@1.37.0: + version "1.37.0" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.37.0.tgz#a0a009b840076706452e29aab0efe0ebf5d45ab1" + integrity sha512-1c46jhTH/myQw6sesrcuHVtLoSNfJv8Pfy9t3rs6subY7kARv0HRw5PpyfPYPpPtQvBOmgbE6K+qgYUpj81LAA== postcss@8.4.14: version "8.4.14" @@ -2552,6 +2574,11 @@ proxy-from-env@1.0.0: resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.0.0.tgz#33c50398f70ea7eb96d21f7b817630a55791c7ee" integrity sha512-F2JHgJQ1iqwnHDcQjVBsq3n/uoaFL+iPW/eAeL7kVxy/2RrWaN4WroKjjvbsoRtv0ftelNyC01bjRhn/bhcf4A== +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + ps-tree@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/ps-tree/-/ps-tree-1.2.0.tgz#5e7425b89508736cdd4f2224d028f7bb3f722ebd"