Automation/playwright

.github/workflows/e2e.yml

@@ -0,0 +1,76 @@
+# e2e test for transcoder
+
+name: CI for Transcoder
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the main branch
+  push:
+    branches: 
+      - master
+      - develop
+
+  pull_request:
+    branches: 
+      - master
+      - develop
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  Run-wpe2e-TestCase:
+    # The type of runner that the job will run on
+    name: Run Transcoder Jobs 
+    runs-on: ubuntu-latest
+    env: 
+      SHA: ${{ github.event.pull_request.head.sha }}
+      COMMIT_SHA: ${{ github.sha }}
+      PR_NUMBER: ${{ github.event.pull_request.number }}
+      working-directory: ./tests/e2e-playwright
+      TESRESULT_TOKEN: ${{ secrets.TESRESULT_TOKEN }}
+      TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+
+      - uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 17
+          cache: "npm"
+          cache-dependency-path: tests/e2e-playwright/package-lock.json
+
+      - name: Install npm dependencies
+        run: npm install
+        working-directory: ${{env.working-directory}}
+
+      - name: Build Playwright utils dependencies
+        run: npm run build
+        working-directory: ${{env.working-directory}}
+
+      - name: Install browser
+        run: npx playwright install chromium 
+        working-directory: ${{env.working-directory}}
+
+      - name: Run End to End tests
+        run: npm run test-e2e:playwright -- test
+        working-directory: ${{env.working-directory}}
+
+      - name: run PR status
+        if: ${{ always() }}
+        run: node ./tests/e2e-playwright/bin/pr-status.js
+        working-directory: ${{env.working_directory}}
+
+      - name: Make reports available
+        uses: actions/upload-artifact@v2
+        if: success() || failure()
+        with:
+          name: playwright-report
+          retention-days: 2
+          path: |
+            ${{ github.workspace }}/playwright-report

tests/e2e-playwright/README.md

@@ -0,0 +1,30 @@
+# wp-e2e
+This is a generic automation test suit using WP Gutenberg Playwright Utils 
+Used Framewrok
+1. Playwright https://playwright.dev/
+2. WordPress E2E Playwright Utils https://github.com/WordPress/gutenberg/tree/trunk/packages/e2e-test-utils-playwright
+
+## Install
+`npm install`
+
+`npm run build`
+
+
+
+## Run all available tests.
+`npm run test-e2e:playwright`
+
+## Run in headed mode.`
+`npm run test-e2e:playwright -- --headed`
+
+## Run a single test file.
+`npm run test-e2e:playwright -- <path_to_test_file> # E.g., npm run test-e2e:playwright -- add-new-post.spec.js`
+
+## Debugging
+`npm run test-e2e:playwright -- --debug`
+
+## Migration
+We can migrate wp-e2e generic test cases from [here](https://github.com/rtCamp/wp-e2e/tree/master/specs) using the steps mentioned in [this](https://github.com/WordPress/gutenberg/pull/38570)
+
+
+

tests/e2e-playwright/bin/packages/build-worker.js

@@ -0,0 +1,199 @@
+/**
+ * External dependencies
+ */
+ const { promisify } = require( 'util' );
+ const fs = require( 'fs' );
+ const path = require( 'path' );
+ const babel = require( '@babel/core' );
+ const makeDir = require( 'make-dir' );
+ const sass = require( 'sass' );
+ const postcss = require( 'postcss' );
+ /**
+  * Internal dependencies
+  */
+ const getBabelConfig = require( './get-babel-config' );
+
+ /**
+  * Path to packages directory.
+  *
+  * @type {string}
+  */
+ const PACKAGES_DIR = path
+     .resolve( __dirname, '../../packages' )
+     .replace( /\\/g, '/' );
+
+ /**
+  * Mapping of JavaScript environments to corresponding build output.
+  *
+  * @type {Object}
+  */
+ const JS_ENVIRONMENTS = {
+     main: 'build',
+     module: 'build-module',
+ };
+
+ /**
+  * Promisified fs.readFile.
+  *
+  * @type {Function}
+  */
+ const readFile = promisify( fs.readFile );
+
+ /**
+  * Promisified fs.writeFile.
+  *
+  * @type {Function}
+  */
+ const writeFile = promisify( fs.writeFile );
+
+ /**
+  * Promisified sass.render.
+  *
+  * @type {Function}
+  */
+ const renderSass = promisify( sass.render );
+
+ /**
+  * Get the package name for a specified file
+  *
+  * @param {string} file File name.
+  *
+  * @return {string} Package name.
+  */
+ function getPackageName( file ) {
+     return path.relative( PACKAGES_DIR, file ).split( path.sep )[ 0 ];
+ }
+
+ /**
+  * Get Build Path for a specified file.
+  *
+  * @param {string} file        File to build.
+  * @param {string} buildFolder Output folder.
+  *
+  * @return {string} Build path.
+  */
+ function getBuildPath( file, buildFolder ) {
+     const pkgName = getPackageName( file );
+     const pkgSrcPath = path.resolve( PACKAGES_DIR, pkgName, 'src' );
+     const pkgBuildPath = path.resolve( PACKAGES_DIR, pkgName, buildFolder );
+     const relativeToSrcPath = path.relative( pkgSrcPath, file );
+     return path.resolve( pkgBuildPath, relativeToSrcPath );
+ }
+
+ async function buildCSS( file ) {
+     const outputFile = getBuildPath(
+         file.replace( '.scss', '.css' ),
+         'build-style'
+     );
+     const outputFileRTL = getBuildPath(
+         file.replace( '.scss', '-rtl.css' ),
+         'build-style'
+     );
+
+     const [ , contents ] = await Promise.all( [
+         makeDir( path.dirname( outputFile ) ),
+         readFile( file, 'utf8' ),
+     ] );
+
+     const importLists = [
+         'colors',
+         'breakpoints',
+         'variables',
+         'mixins',
+         'animations',
+         'z-index',
+     ]
+         // Editor styles should be excluded from the default CSS vars output.
+         .concat(
+             file.includes( 'common.scss' ) || ! file.includes( 'block-library' )
+                 ? [ 'default-custom-properties' ]
+                 : []
+         )
+         .map( ( imported ) => `@import "${ imported }";` )
+         .join( ' ' );
+
+     const builtSass = await renderSass( {
+         file,
+         includePaths: [ path.join( PACKAGES_DIR, 'base-styles' ) ],
+         data: ''.concat( '@use "sass:math";', importLists, contents ),
+     } );
+
+     const result = await postcss(
+         require( '@wordpress/postcss-plugins-preset' )
+     ).process( builtSass.css, {
+         from: 'src/app.css',
+         to: 'dest/app.css',
+     } );
+
+     const resultRTL = await postcss( [ require( 'rtlcss' )() ] ).process(
+         result.css,
+         {
+             from: 'src/app.css',
+             to: 'dest/app.css',
+         }
+     );
+
+     await Promise.all( [
+         writeFile( outputFile, result.css ),
+         writeFile( outputFileRTL, resultRTL.css ),
+     ] );
+ }
+
+ async function buildJS( file ) {
+     for ( const [ environment, buildDir ] of Object.entries(
+         JS_ENVIRONMENTS
+     ) ) {
+         const destPath = getBuildPath(
+             file.replace( /\.tsx?$/, '.js' ),
+             buildDir
+         );
+         const babelOptions = getBabelConfig(
+             environment,
+             file.replace( PACKAGES_DIR, '@wordpress' )
+         );
+
+         const [ , transformed ] = await Promise.all( [
+             makeDir( path.dirname( destPath ) ),
+             babel.transformFileAsync( file, babelOptions ),
+         ] );
+
+         await Promise.all( [
+             writeFile( destPath + '.map', JSON.stringify( transformed.map ) ),
+             writeFile(
+                 destPath,
+                 transformed.code +
+                     '\n//# sourceMappingURL=' +
+                     path.basename( destPath ) +
+                     '.map'
+             ),
+         ] );
+     }
+ }
+
+ /**
+  * Object of build tasks per file extension.
+  *
+  * @type {Object<string,Function>}
+  */
+ const BUILD_TASK_BY_EXTENSION = {
+     '.scss': buildCSS,
+     '.js': buildJS,
+     '.ts': buildJS,
+     '.tsx': buildJS,
+ };
+
+ module.exports = async ( file, callback ) => {
+     const extension = path.extname( file );
+     const task = BUILD_TASK_BY_EXTENSION[ extension ];
+
+     if ( ! task ) {
+         callback( new Error( `No handler for extension: ${ extension }` ) );
+     }
+
+     try {
+         await task( file );
+         callback();
+     } catch ( error ) {
+         callback( error );
+     }
+ };