{"_id":"@andersundsehr/playwright-addon","_rev":"3-ec224c7a4a14eb0eb1ea25e265d19917","name":"@andersundsehr/playwright-addon","dist-tags":{"latest":"0.1.1"},"versions":{"0.0.1":{"name":"@andersundsehr/playwright-addon","version":"0.0.1","keywords":["storybook","histoire","playwright","testing","addon","e2e","integration"],"license":"GPL-2.0-or-later","_id":"@andersundsehr/playwright-addon@0.0.1","maintainers":[{"name":"kantinpm","email":"git@kanti.de"}],"homepage":"https://github.com/andersundsehr/playwright-addon","bugs":{"url":"https://github.com/andersundsehr/playwright-addon/issues"},"dist":{"shasum":"5987a961810dea065b5df614eb051274824f417f","tarball":"https://registry.npmjs.org/@andersundsehr/playwright-addon/-/playwright-addon-0.0.1.tgz","fileCount":24,"integrity":"sha512-mVpm1cuYM5oEa0j9fLoZrd3oIeH/rgRg4QwP+FTTlIDSAB65vYtIGwJ5K7oOTElYfsrSWWlCFzLCT6+IrZMndQ==","signatures":[{"sig":"MEUCIQCGG7WR9bgiSYQwiXQHolEhfpU8PSjyDm7GLAqkpfwriwIgPiv4+OtK4x9CjuUroFUlBHh7UWUPxpZbtNTJvTCxqfs=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":60789},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"e6ccc21125fdb4d38856694412684a6ac3a41688","scripts":{"test":"node --test --experimental-strip-types **/*.test.{cts,mts,ts}","build":"tsc","test:watch":"npm run test -- --watch","prepublishOnly":"npm run build"},"_npmUser":{"name":"kantinpm","email":"git@kanti.de"},"repository":{"url":"git+https://github.com/andersundsehr/playwright-addon.git","type":"git"},"_npmVersion":"10.9.3","description":"Easy integration of Storybook or Histoire into your playwright setup.","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@playwright/test":"^1.54.1","axe-html-reporter":"^2.2.11","@axe-core/playwright":"^4.10.2","axe-result-pretty-print":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/node":"^22.18.0"},"peerDependencies":{"storybook":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/playwright-addon_0.0.1_1757436168037_0.1722595837283043","host":"s3://npm-registry-packages-npm-production"}},"0.1.0":{"name":"@andersundsehr/playwright-addon","version":"0.1.0","keywords":["storybook","histoire","playwright","testing","addon","e2e","integration"],"license":"GPL-2.0-or-later","_id":"@andersundsehr/playwright-addon@0.1.0","maintainers":[{"name":"kantinpm","email":"git@kanti.de"}],"homepage":"https://github.com/andersundsehr/playwright-addon","bugs":{"url":"https://github.com/andersundsehr/playwright-addon/issues"},"dist":{"shasum":"4da0bae10784d0d22269f178d7ef030d1feee02b","tarball":"https://registry.npmjs.org/@andersundsehr/playwright-addon/-/playwright-addon-0.1.0.tgz","fileCount":24,"integrity":"sha512-ijj1yYRSSDmrBJ7PrdJ8ZalFe/6dvHPtSZcxyB+letakjTAR3DzELDwQ8V6Z1thCwqE4tc3+/JY8UgRDdGrggQ==","signatures":[{"sig":"MEQCICIqQ5G+j6UYZWiHa/nBBwxlTfWE6b/rrJ+PAOka4SENAiAxRXqAuSufVjpHJO8fKjZ3xwVcp0+UAn8UQ6VZdVu+PQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":62991},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js"}},"gitHead":"e5181e368f87cca07349ffcfe4228a96d573d0ac","scripts":{"test":"node --test --experimental-strip-types **/*.test.{cts,mts,ts}","build":"tsc","test:watch":"npm run test -- --watch","prepublishOnly":"npm run build"},"_npmUser":{"name":"kantinpm","email":"git@kanti.de"},"repository":{"url":"git+https://github.com/andersundsehr/playwright-addon.git","type":"git"},"_npmVersion":"10.9.3","description":"Easy integration of Storybook or Histoire into your playwright setup.","directories":{},"_nodeVersion":"22.19.0","dependencies":{"@playwright/test":"^1.54.1","axe-html-reporter":"^2.2.11","@axe-core/playwright":"^4.10.2","axe-result-pretty-print":"^1.0.2"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.9.2","@types/node":"^22.18.0"},"peerDependencies":{"storybook":"^9.0.0"},"_npmOperationalInternal":{"tmp":"tmp/playwright-addon_0.1.0_1757578528866_0.4899677361238812","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@andersundsehr/playwright-addon","description":"Easy integration of Storybook or Histoire into your playwright setup.","keywords":["storybook","histoire","playwright","testing","addon","e2e","integration"],"homepage":"https://github.com/andersundsehr/playwright-addon","license":"GPL-2.0-or-later","bugs":{"url":"https://github.com/andersundsehr/playwright-addon/issues"},"repository":{"type":"git","url":"git+https://github.com/andersundsehr/playwright-addon.git"},"type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","exports":{".":{"import":"./dist/index.js","types":"./dist/index.d.ts"}},"dependencies":{"@playwright/test":"^1.54.1","axe-html-reporter":"^2.2.11","axe-result-pretty-print":"^1.0.2","@axe-core/playwright":"^4.10.2"},"peerDependencies":{"storybook":"^9.0.0"},"devDependencies":{"typescript":"^5.9.2","@types/node":"^22.18.0"},"scripts":{"test":"node --test --experimental-strip-types **/*.test.{cts,mts,ts}","test:watch":"npm run test -- --watch","build":"tsc","prepublishOnly":"npm run build"},"version":"0.1.1","_id":"@andersundsehr/playwright-addon@0.1.1","gitHead":"807ed36756fd2760f94f71945801a8b64e5d69e0","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-QOaCKBp/9qT037yCEIWDJ0Thym1eFrwRDBhR8vLGrK4rHbKrmSdNvq0l66VSKpvl998mRRiTxf89UUFMsYZ2bw==","shasum":"d63a71d158c83f7a8f3f2f4030b30defcc6cd2c8","tarball":"https://registry.npmjs.org/@andersundsehr/playwright-addon/-/playwright-addon-0.1.1.tgz","fileCount":24,"unpackedSize":63160,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDm7f3yGtMNvb2QYGy0viNzMALMKaVLJH5/Q4RjrvOLkAiEAmkfcdP+NffU4BsUD+C8Y8f78iXKLqRaZkMtYenUrvkA="}]},"_npmUser":{"name":"kantinpm","email":"git@kanti.de"},"directories":{},"maintainers":[{"name":"kantinpm","email":"git@kanti.de"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/playwright-addon_0.1.1_1757684747474_0.8375822032671125"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-09T16:42:47.926Z","modified":"2025-09-12T13:45:47.827Z","0.0.1":"2025-09-09T16:42:48.219Z","0.1.0":"2025-09-11T08:15:29.059Z","0.1.1":"2025-09-12T13:45:47.643Z"},"bugs":{"url":"https://github.com/andersundsehr/playwright-addon/issues"},"license":"GPL-2.0-or-later","homepage":"https://github.com/andersundsehr/playwright-addon","keywords":["storybook","histoire","playwright","testing","addon","e2e","integration"],"repository":{"type":"git","url":"git+https://github.com/andersundsehr/playwright-addon.git"},"description":"Easy integration of Storybook or Histoire into your playwright setup.","maintainers":[{"name":"kantinpm","email":"git@kanti.de"}],"readme":"# @andersundsehr/playwright-addon\nA Playwright package for Storybook that provides a set of tools and utilities to enhance the integration between Playwright and Storybook.\n\n\n## Install\n\n```bash\nnpm install --save-dev @andersundsehr/playwright-addon\n# or\nyarn add -D @andersundsehr/playwright-addon\n```\n\nMake sure you ignore the auto generated files and folders.  \nFor storybook you can add this to your viteFinal in your `.storybook/main.js|ts`\n\n```ts\nimport { mergeConfig } from 'vite';\n\nconst config = {\n  viteFinal(config, options) {\n    return mergeConfig(config, {\n      server: {\n        watch: {\n          ignored: [\n            '**/playwright-report/**', // change this if you change it in your playwright config\n            '**/*-snapshots/**', // change this if you change it in your playwright config\n            '**/*-axe-report/**', // this can not be changed of right now\n          ],\n        },\n      },\n    } satisfies Partial<InlineConfig>);\n  }\n};\n\n```\n\n## Features\n\n### test all stories in a Storybook instance (fetchStories and snapshotTest)\n\n````ts\nimport { fetchStories, test, snapshotTest } from '@andersundsehr/playwright-addon';\n\nconst stories = await fetchStories('https://' + process.env.VIRTUAL_HOST);\n\nfor (const story of stories) {\n\n  test(`${story.title} ${story.name}`, async function ({ page }) {\n    await snapshotTest(page, {story});\n  });\n}\n\n````\n\n### page.goToStory()\n\nIf you put your test file beside your story file, you can use `page.goToStory('storyId')` to go to a specific story.  \nrequirements:\n- your test filename must match this regex: `/\\.spec\\.(js|jsx|mjs|ts|tsx)$/`\n- your story filename must match this regex: `/\\.stories\\.(js|jsx|mjs|ts|tsx)$/`\n- the part before `.spec.` and `.stories.` must be the same\n- eg: `Button.stories.ts` and `Button.spec.ts`\n\n````ts\nimport { test } from '@andersundsehr/playwright-addon';\n\ntest('my test', async function ({ page }) {\n  await page.goToStory('Default'); // storyId from the export const Default = ...\n  \n  // test your component here:\n});\n````\n\n### page.assertConsoleLogEmpty()\n\nThis can be used to assert that there are no console logs, warnings or errors on the page.\nIf you want to ignore all current issues, you can use `playwright test --update-snapshots` to update the snapshots and ignore the current issues.  \nThis will create an `<snapshotFolder>/<testcase>.consoleignore` file with the current issues ignored.\n\nSee also global ignore (below).\n\n\n````ts\nimport { test } from '@andersundsehr/playwright-addon';\ntest('my console logging test', async function ({ page }) {\n\n  // ... page.goto or page.goToStory ...\n  \n  await page.assertConsoleLogEmpty();\n});\n````\n\n### checkAccessibility()\n\nThis uses axe-core to check accessibility issues on the page.\n\n- You can provide a selector to limit the check to a specific part of the page (e.g. your component root element).\n- You can also provide a list of accessibility tags to check against (default is a good set of tags). [List of possible tags](https://www.deque.com/axe/core-documentation/api-documentation/) \n- You can also choose to have the axe reports saved in a folder (axe-reports) instead of just the console.\n\nIf there is an accessibility issue, the test will fail and you will get a report in the console (and in a file if axeFolder is true).  \nIf you want to ignore all current issues, you can use `playwright test --update-snapshots` to update the snapshots and ignore the current issues.  \nThis will create an `<snapshotFolder>/<testcase>.accessibilityignore` file with the current issues ignored.\n\nSee also global ignore (below).\n\n````ts\nimport { test, checkAccessibility } from '@andersundsehr/playwright-addon';\ntest('my accessibility test', async function ({ page }) {\n  await checkAccessibility(\n    page,\n    '#root', // selector: default is 'body'\n    ['wcag22aa', 'wcag22a', 'wcag21aa', 'wcag21a', 'wcag2aa', 'wcag2a', 'best-practice'], // accessibilityTags: default as shown here\n    false, // axeFolder: default is false, if you want the reports in a folder, set it to true\n  );\n});\n````\n\n### global ignores:\n\nYou can set global ignore entries in your playwright config file.  \nYou should be careful with this, as this ignores will be applied to all tests.\n\n````ts\nimport { defineConfig, devices } from '@playwright/test';\n\n// ...\n\nexport default defineConfig({\n  \n  // ...\n  \n  projects: [\n    {\n      name: 'chromium',\n      use: { ...devices['Desktop Chrome'] },\n      metadata: {\n        ignoreEntries: {\n          // you can have global ignore entries here\n          // these will be merged with the per-testcase ignore files\n          '.consoleignore': [\n            // you can use strings or regex here\n            /^debug➡️ \\[vite].*$/,\n            'debug➡️ initialized',\n          ],\n          '.accessibilityignore': [\n            /^color-contrast:/,\n            \"empty-heading: 2 - Don't leave heading elements empty or hide them.\"\n          ],\n        },\n      },\n    }\n  ]\n  \n});\n````\n\n## TODOs:\n\n- add histoire support\n\n# with ♥️ from anders und sehr GmbH\n\n> If something did not work 😮  \n> or you appreciate this Extension 🥰 let us know.\n\n> We are always looking for great people to join our team!\n> https://www.andersundsehr.com/karriere/\n","readmeFilename":"README.md"}