Merge pull request #2057 from rtCamp/wp-e2e-playwright

Wp e2e playwright

.github/ci/main.sh

@@ -0,0 +1,92 @@
+#!/usr/bin/env bash
+set -ex
+######################################################
+######################## VARS ########################
+SITE_NAME='rtmedia.local'
+SITE_ROOT="/var/www/$SITE_NAME/htdocs"
+SITE_URL="http://$SITE_NAME/"
+function ee() { wo "$@"; }
+#####################################################
+# Start required services for site creation
+function start_services() {
+    echo "Starting services"
+    git config --global user.email "[email protected]"
+    git config --global user.name "nobody"
+    rm /etc/nginx/conf.d/stub_status.conf /etc/nginx/sites-available/22222 /etc/nginx/sites-enabled/22222
+    rm -rf /var/www/22222
+    ee stack start --nginx --mysql --php74
+    ee stack status --nginx --mysql --php74
+}
+
+# Create, setup and populate rtMedia Pro plugin with data
+function create_and_configure_site () {
+
+    ee site create $SITE_NAME --wp --php74 
+    cd $SITE_ROOT/wp-content/plugins/
+    mkdir rtMedia
+    rsync -azh $GITHUB_WORKSPACE/ $SITE_ROOT/wp-content/plugins/rtmedia
+    echo "127.0.0.1 $SITE_NAME" >> /etc/hosts
+    cd rtmedia
+    ls
+    wp plugin activate rtmedia --allow-root
+    wp user create test [email protected] --role=administrator --user_pass=1234 --allow-root
+    wp user create test1 [email protected] --role=administrator --user_pass=1234 --allow-root
+    wp theme install twentytwentyone --allow-root
+    wp theme activate twentytwentyone --allow-root
+    wp plugin install buddypress --allow-root
+    wp plugin activate buddypress --allow-root
+}
+
+# Install WPe2e dependency
+function install_playwright_package () {
+
+    cd $GITHUB_WORKSPACE/tests/wp-e2e-playwright
+    git clone --depth=1 https://github.com/rtCamp/rtmedia-test-data.git test-data
+    npm install
+
+}
+
+function install_playwright(){
+     cd $GITHUB_WORKSPACE/tests/wp-e2e-playwright
+    npx playwright install
+}
+
+# Run test for new deployed site
+function run_playwright_tests () {
+    cd $GITHUB_WORKSPACE/tests/wp-e2e-playwright
+    npm run test-e2e:playwright -- prerequisite.spec.js
+    npm run test-e2e:playwright -- specs/buddypress
+    npm run test-e2e:playwright -- specs/display
+    npm run test-e2e:playwright -- specs/other_settings
+    npm run test-e2e:playwright -- media_size.spec.js
+    npm run test-e2e:playwright -- types.spec.js
+}
+
+function maybe_install_node_dep() {
+	if [[ -n "$NODE_VERSION" ]]; then
+		echo "Setting up $NODE_VERSION"
+		NVM_LATEST_VER=$(curl -s "https://api.github.com/repos/nvm-sh/nvm/releases/latest" |
+			grep '"tag_name":' |
+			sed -E 's/.*"([^"]+)".*/\1/') &&
+			curl -fsSL "https://raw.githubusercontent.com/nvm-sh/nvm/$NVM_LATEST_VER/install.sh" | bash
+		export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
+		[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
+		nvm install "$NODE_VERSION"
+		nvm use "$NODE_VERSION"
+
+		[[ -z "$NPM_VERSION" ]] && NPM_VERSION="latest" || echo ''
+		export npm_install=$NPM_VERSION
+		curl -fsSL https://www.npmjs.com/install.sh | bash
+	fi
+}
+
+function main() {
+    start_services
+    create_and_configure_site
+    maybe_install_node_dep
+    install_playwright_package
+    install_playwright
+    run_playwright_tests
+}
+
+main

.github/workflows/playwright.yml

@@ -0,0 +1,54 @@
+# e2e test for rtMedia pro plugin. 
+
+name: CI for rtMedia plugin
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on pull request events
+  pull_request:
+    branches:
+      - wp-e2e-playwright
+      - develop
+      - master
+
+  # 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 rtMedia Features Test Cases
+    runs-on: ubuntu-latest
+    env: 
+      TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      working-directory: ./tests/wp-e2e-playwright
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      # Check node version
+      - name: Current directory and listings
+        run: |
+          pwd
+          ls -al
+        # Install config site
+      - name: Install and config site
+        uses: docker://rtcamp/base-wo:v1.0.0
+        env:
+          NODE_VERSION: 17
+          RCLONE_CONFIG: ${{ secrets.RCLONE_CONFIG }}
+
+      - name: Archive HTML Report on failure
+        if: failure()
+        uses: actions/upload-artifact@v1
+        with:
+          name: report
+          path: ./tests/wp-e2e-playwright/playwright-report
+
+      - name: Cleanup
+        if: ${{ always() }}
+        uses: rtCamp/action-cleanup@master

tests/wp-e2e-playwright/.env

@@ -0,0 +1,6 @@
+WP_USERNAME=test
+WP_PASSWORD=1234
+WP_BASE_URL=http://rtmedia.local/
+
+test_Username=test1
+test_pass=1234

tests/wp-e2e-playwright/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+artifacts
+build
+.DS_store
+test-data

tests/wp-e2e-playwright/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require( '@wordpress/prettier-config' );

tests/wp-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/wp-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 );
+     }
+ };