[Question/Help] How to record video of a test?

[NareshMurthy]

I can record videos using playwright, while creating a page object.

//Playwright 1.8.0
// With browser.newPage()
const page = await browser.newPage({ recordVideo: { dir: 'videos/' } });
await page.close();

Since jest-playwright-preset creates a page object for us by default.
How do we record videos using jest-playwright-preset?

[mxschmitt]

Something like that should work when you put it into your configuration file.

// jest-playwright.config.js
module.exports = {
  contextOptions: {
    recordVideo: { dir: 'videos/' }
  }
}
```

[NareshMurthy]

Thanks @mxschmitt

[se-thomas]

I've been trying to follow the info I've found online regarding this setting, and there are no videos produced when I run my test:

// __tests_/example.js
describe('Visit websites', () => {
  it('can visit a few web pages successfully', async () => {
    await page.goto("https://google.com", { waitUntil: "networkidle" })
    await page.goto("https://apple.com", { waitUntil: "networkidle" })
    await page.goto("https://github.com", { waitUntil: "networkidle" })
  })
})

// jest-playwright.config
module.exports = {
    launchOptions: {
      headless: true
    },
    contextOptions: {
        recordVideo: {
            dir: "videos/"
        },
        ignoreHTTPSErrors: true,
        viewport: {
            width: 1920,
            height: 1080
        }
    },
    browsers: ["chromium", "firefox"]
}

// jest.e2e.config.js
module.exports = {
    verbose: true,
    preset: "jest-playwright-preset"
}

// package.json
{
  "name": "poc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "jest -c jest.e2e.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "jest": "^26.6.3",
    "jest-playwright-preset": "^1.5.2",
    "playwright": "^1.11.0"
  }
}

Running test using: npm run test

I'm probably missing something basic, but some pointers please.

Many thanks in advance

[orihomie]

@se-thomas Hi, have you tried to set this options?

[se-thomas]

@orihomie Your link points to Playwright's test runner, not Jest. But yes, I've replaced Jest with the "native" runner and got videos 👍

[orihomie]

This is my working configuration, hope this helps:

module.exports = {
	preset: 'jest-playwright-preset',
	transform: {
		'^.+\\.ts?$': 'ts-jest',
	},
	globals: {
		'ts-jest': {
			diagnostics: false,
			tsconfig: 'tsconfig.json'
		}
	},
	testMatch: ['<rootDir>/**/*.e2e.js', '<rootDir>/**/*.e2e.ts'],
	testEnvironmentOptions: {
		'jest-playwright': {
			browsers: ['chromium'],
			launchOptions: {
				headless: true
			},
			contextOptions: {
				recordVideo: {
					dir: process.env.TESTS_VIDEO_DIR || '/tmp/test-results',
				}
			},
			viewport: {
				width: 1920,
				height: 1080
			}
		}
	},
	testResultsProcessor: 'jest-teamcity-reporter'
}

[RakeshBadanala-412]

Hi, Can anyone please let me know how to recordVideo using jest-playwrightConfig?
Actually I have used typescript file and used below lines in jest-playwrightConfig file but folder and video is not created.

//jest-playwrightConfig file
module.exports = {
browsers: ["chromium"],
exitOnPageError: false,
launchOptions: {
headless: false
},
contextOptions: {
recordVideo: {
dir: "videos/"
}
}
}

//jest.config file
module.exports = {
verbose: true,
preset: 'jest-playwright-preset',
transform: {
'^.+\.ts$': 'ts-jest',
}
}

Note: I am able to generate the video when I run with javascript(filename.test.js) file but I want to run with typescript(filename.test.ts)

Kindly help me with an answer