playwright
playwright copied to clipboard
microsoft
[Question] Is there a way to capture screenshot at the end of each test.step?
I understand playwright captures screenshot at the end of each test if we keep "screenshot: on" in playwright.config.js. But is there a way to do it at the end of each test.step as well and include it in html reporter? as my project requires to capture screenshot after each step. I know it can be achieved with testInfo.attach which means i have to include the piece of code "await testInfo.attach('screenshot', { body: await page.screenshot(), contentType: 'image/png' });" in each test.step and but is there a simpler way to do it?
@s-sivasubramaniam no, there's no way for now. Let me marked this as a feature request. If it becomes popular, we'll prioritize it accordingly!
@moshikd please upvote the issue to bump it's priority. The more upvotes something has, the more we look onto it!
Would really love this feature, have a ton of "testInfo.attach"on each test.step
Yes please - would be great to have this as a feature without needing testInfo.attach scatterd throughout the code.
If this existed in the code, I would use it immediately!
I think something like a test.beforeEachStep and a test.afterEachStep function would be really useful. This would allow for other things to be called as well.
Until this is implemented I use the following custom fixture step:
import { test as base, expect } from '@playwright/test';
type StepFn = (title: string, fn: () => unknown) => unknown;
const test = base.extend<{step: StepFn}>({
step: async ({ page }, use, testInfo) => {
await use(async (title, fn) => {
await test.step(title, async () => {
try {
await fn();
} finally {
await testInfo.attach(`screenshot after step "${title}"`, {
body: await page.screenshot(),
contentType: 'image/png'
});
}
});
});
}
});
Usage in test:
test('Check title', async ({ page, step }) => {
await step('I open url', async () => {
await page.goto('https://playwright.dev');
});
await step('I click link', async () => {
await page.getByRole('link', { name: 'Get started' }).click();
});
await step('I check title', async () => {
await expect(page).toHaveTitle('Installation | Playwright');
})
});
Steps in HTML report:
Screenshots in HTML report:
- for the test step screenshotting feature to be added so that screenshots can be available in the report after each test step.
