Create E2E package (https://github.com/woocommerce/woocommerce-admin/pull/7084)

* bump E2E package versions to latest

* first pass on E2E test package.json

* move e2e specs to admin-e2e-tests

* add global types, reimplement tests/e2e/specs

* use consistent build dir with other packages

* add documentation, improve test:e2e script

* fix linting issues in admin-e2e-tests

* fix more linting issues

* disable lint on requires

* use e2e in the E2E container names

* move analytics overview test to package

* change extension on analytics-overview test file

* fix linting issues in e2e analytics overview

* remove package scripts from e2e package

* change test specs extensions to .tsx

* remove import from analytics overview test spec

* add .tsx to e2e test spec file extension list

* update e2e business features count expected

plugins/woocommerce-admin/.distignore

@@ -25,6 +25,7 @@ README.md
 wp-cli.local.yml
 yarn.lock
 tests
+packages/admin-e2e-tests
 vendor
 config
 node_modules

plugins/woocommerce-admin/package.json

@@ -60,7 +60,7 @@
 		"pretest": "npm run -s install-if-no-packages",
 		"test": "./node_modules/jest-24.9.0/bin/jest.js --config tests/js/jest.config.json",
 		"test:debug": "node --inspect-brk ./node_modules/jest-24.9.0/bin/jest.js --config tests/js/jest.config.json --watch --runInBand --no-cache",
-		"test:e2e": "WP_VERSION=latest npm run build && npx wc-e2e docker:down && npx wc-e2e docker:up && npx wc-e2e test:e2e",
+		"test:e2e": "npm run build && test -z \"$(docker ps | grep woocommerce-admin-e2e)\" || npx wc-e2e docker:down && npx wc-e2e docker:up && npx wc-e2e test:e2e",
 		"test-staged": "./node_modules/jest-24.9.0/bin/jest.js --bail --config tests/js/jest.config.json --findRelatedTests",
 		"test:help": "wp-scripts test-unit-js --help",
 		"test:php": "docker-compose -f docker/wc-admin-php-test-suite/docker-compose.yml run --rm phpunit",
@@ -93,6 +93,7 @@
 		"@wordpress/api-fetch": "2.2.8",
 		"@wordpress/base-styles": "3.3.0",
 		"@wordpress/components": "11.1.3",
+		"@wordpress/compose": "3.23.1",
 		"@wordpress/core-data": "3.0.0",
 		"@wordpress/data": "5.0.0",
 		"@wordpress/data-controls": "2.0.0",
@@ -161,7 +162,8 @@
 		"@types/wordpress__components": "9.8.6",
 		"@types/wordpress__data-controls": "1.0.4",
 		"@typescript-eslint/eslint-plugin": "4.22.1",
-		"@woocommerce/api": "0.1.2",
+		"@woocommerce/admin-e2e-tests": "file:packages/admin-e2e-tests",
+		"@woocommerce/api": "0.2.0",
 		"@woocommerce/components": "file:packages/components",
 		"@woocommerce/csv-export": "file:packages/csv-export",
 		"@woocommerce/currency": "file:packages/currency",

plugins/woocommerce-admin/packages/admin-e2e-tests/CHANGELOG.md

@@ -0,0 +1,3 @@
+# 0.1.0
+
+-   Released initial package

plugins/woocommerce-admin/packages/admin-e2e-tests/README.md

@@ -0,0 +1,56 @@
+# Admin E2E Tests
+
+An end-to-end test suite for WooCommerce setup, onboarding, home screen/task list, and analytics. 
+
+## Installation
+
+Install the module
+
+```bash
+npm install @woocommerce/admin-e2e-tests --save
+```
+
+## Usage
+
+Create a E2E test specification file under `/tests/e2e/specs/example.test.js`:
+
+```js
+const { testAdminBasicSetup } = require( '@woocommerce/admin-e2e-tests' );
+
+testAdminBasicSetup();
+```
+
+See the [wooCommerce E2E Boilerplate](https://github.com/woocommerce/woocommerce-e2e-boilerplate) for instructions on setting up an E2E test environment.
+
+### Configuration
+
+Add the following entries to `tests/e2e/config/default.json`
+
+```json
+  "onboardingwizard": {
+    "industry": "Test industry",
+    "numberofproducts": "1 - 10",
+    "sellingelsewhere": "No"
+  },
+  "settings": {
+    "shipping": {
+      "zonename": "United States",
+      "zoneregions": "United States (US)",
+      "shippingmethod": "Free shipping"
+    }
+  }
+```
+
+### Available tests
+
+The following test functions are included in the package:
+
+| Function | Description |
+| --- | --- |
+| `testAdminBasicSetup` | Test that WooCommerce can be activated with pretty permalinks |
+| `testAdminOnboardingWizard` | Complete the onboarding wizard with US merchant |
+| `testAdminNonUSRecommendedFeatures` | Complete the onboarding wizard with non-US merchant |
+| `testSelectiveBundleWCPay` | Ensure onboarding wizard offers WC Payments in appropriate contexts |
+| `testAdminAnalyticsPages` | Test that the React App is functional on Analytics pages |
+| `testAdminCouponsPage` | Test that the Coupons is functional |
+| `testAdminPaymentSetupTask` | Test that payment methods can be configured |

plugins/woocommerce-admin/packages/admin-e2e-tests/package.json

@@ -0,0 +1,44 @@
+{
+ "name": "@woocommerce/admin-e2e-tests",
+ "version": "0.1.0",
+ "author": "Automattic",
+ "description": "E2E tests for the new WooCommerce interface.",
+ "homepage": "https://github.com/woocommerce/woocommerce-admin/tree/main/packages/admin-e2e-tests/README.md",
+ "repository": {
+  "type": "git",
+  "url": "https://github.com/woocommerce/woocommerce-admin.git"
+ },
+ "keywords": [
+  "woocommerce",
+  "e2e"
+ ],
+ "license": "GPL-3.0+",
+ "main": "build/index.js",
+ "types": "build/index.d.ts",
+ "files": [
+  "/build/",
+  "!*.ts.map",
+  "!*.tsbuildinfo"
+ ],
+ "sideEffects": false,
+ "dependencies": {
+  "@jest/globals": "^26.4.2",
+  "@types/jest": "26.0.23",
+  "config": "3.3.6"
+ },
+ "peerDependencies": {
+  "@woocommerce/e2e-environment": "0.2.2",
+   "@woocommerce/e2e-utils": "0.1.5",
+   "puppeteer": "^2.0.0"
+ },
+ "devDependencies": {
+  "@types/expect-puppeteer": "4.4.5",
+  "@types/puppeteer": "5.4.3",
+  "@typescript-eslint/eslint-plugin": "4.22.1",
+  "jest-mock-extended": "^1.0.10",
+  "typescript": "4.2.4"
+ },
+ "publishConfig": {
+  "access": "public"
+ }
+}

plugins/woocommerce-admin/packages/admin-e2e-tests/src/elements/BaseElement.ts

@@ -1,3 +1,6 @@
+/**
+ * External dependencies
+ */
 import { Page } from 'puppeteer';
 
 export abstract class BaseElement {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/elements/DropdownField.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { getElementByText, getInputValue } from '../utils/actions';
 import { BaseElement } from './BaseElement';
 

plugins/woocommerce-admin/packages/admin-e2e-tests/src/elements/DropdownTypeaheadField.ts

@@ -1,6 +1,12 @@
-import { clearAndFillInput } from '@woocommerce/e2e-utils';
+/**
+ * Internal dependencies
+ */
 import { BaseElement } from './BaseElement';
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { clearAndFillInput } = require( '@woocommerce/e2e-utils' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
 export class DropdownTypeaheadField extends BaseElement {
 	async search( text: string ) {
 		await clearAndFillInput( this.selector + '-0__control-input', text );

plugins/woocommerce-admin/packages/admin-e2e-tests/src/elements/FormToggle.ts

@@ -1,5 +1,7 @@
+/**
+ * Internal dependencies
+ */
 import { BaseElement } from './BaseElement';
-
 import { hasClass } from '../utils/actions';
 
 export class FormToggle extends BaseElement {
@@ -14,7 +16,7 @@ export class FormToggle extends BaseElement {
 					`Could not find form toggle with selector ${ this.selector }`
 				);
 			}
-			input?.click();
+			input.click();
 
 			// Wait for it to be checked.
 			await this.page.waitForSelector(
@@ -33,7 +35,7 @@ export class FormToggle extends BaseElement {
 					`Could not find form toggle with selector ${ this.selector }`
 				);
 			}
-			input?.click();
+			input.click();
 
 			// Wait for a not checked toggle to be present.
 			await page.waitForFunction(

plugins/woocommerce-admin/packages/admin-e2e-tests/src/globalTypes.ts

@@ -1,3 +1,6 @@
+/**
+ * External dependencies
+ */
 import { Browser, Page } from 'puppeteer';
 
 declare global {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/index.ts

@@ -0,0 +1 @@
+export * from './specs';

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/AllOrdersView.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export class AllOrdersView extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/Analytics.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export type AnalyticsSection =

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/AnalyticsOverview.ts

@@ -1,4 +1,11 @@
+/**
+ * External dependencies
+ */
 import { ElementHandle } from 'puppeteer';
+
+/**
+ * Internal dependencies
+ */
 import { waitForElementByText } from '../utils/actions';
 import { Analytics } from './Analytics';
 
@@ -39,7 +46,7 @@ export class AnalyticsOverview extends Analytics {
 
 	async openSectionEllipsis( sectionTitle: string ) {
 		const section = ( await this.getSections() ).find(
-			( section ) => section.title === sectionTitle
+			( thisSection ) => thisSection.title === sectionTitle
 		);
 		if ( section ) {
 			const ellipsisMenu = await section.element.$(
@@ -54,7 +61,7 @@ export class AnalyticsOverview extends Analytics {
 
 	async closeSectionEllipsis( sectionTitle: string ) {
 		const section = ( await this.getSections() ).find(
-			( section ) => section.title === sectionTitle
+			( thisSection ) => thisSection.title === sectionTitle
 		);
 		if ( section ) {
 			const ellipsisMenu = await section.element.$(

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/BasePage.ts

@@ -1,16 +1,25 @@
+/**
+ * External dependencies
+ */
 import { ElementHandle, Page } from 'puppeteer';
+
+/**
+ * Internal dependencies
+ */
 import { DropdownField } from '../elements/DropdownField';
 import { DropdownTypeaheadField } from '../elements/DropdownTypeaheadField';
 import { FormToggle } from '../elements/FormToggle';
 import { getElementByText } from '../utils/actions';
 
+/* eslint-disable @typescript-eslint/no-var-requires */
 const config = require( 'config' );
+/* eslint-enable @typescript-eslint/no-var-requires */
 const baseUrl = config.get( 'url' );
 
 // Represents a page that can be navigated to
 export abstract class BasePage {
 	protected page: Page;
-	protected url: string = '';
+	protected url = '';
 	protected baseUrl: string = baseUrl;
 
 	// cache of elements that have been setup, note that they are unique "per page/per selector"

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/Coupons.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export class Coupons extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/Dashboard.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export class Dashboard extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/Login.ts

@@ -1,7 +1,11 @@
-import { clearAndFillInput } from '@woocommerce/e2e-utils';
+/**
+ * Internal dependencies
+ */
 import { getElementByText } from '../utils/actions';
 import { BasePage } from './BasePage';
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { clearAndFillInput } = require( '@woocommerce/e2e-utils' );
 const config = require( 'config' );
 
 export class Login extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/NewCoupon.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export class NewCoupon extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/NewOrder.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export class NewOrder extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/NewProduct.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export class NewProduct extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/OnboardingWizard.ts

@@ -1,4 +1,11 @@
+/**
+ * External dependencies
+ */
 import { Page } from 'puppeteer';
+
+/**
+ * Internal dependencies
+ */
 import { BusinessSection } from '../sections/onboarding/BusinessSection';
 import { IndustrySection } from '../sections/onboarding/IndustrySection';
 import { ProductTypeSection } from '../sections/onboarding/ProductTypesSection';
@@ -6,6 +13,9 @@ import { StoreDetailsSection } from '../sections/onboarding/StoreDetailsSection'
 import { ThemeSection } from '../sections/onboarding/ThemeSection';
 import { BasePage } from './BasePage';
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { expect } = require( '@jest/globals' );
+
 export class OnboardingWizard extends BasePage {
 	url = 'wp-admin/admin.php?page=wc-admin&path=/setup-wizard';
 

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/PaymentsSetup.ts

@@ -1,9 +1,8 @@
 /**
  * Internal dependencies
  */
-import { waitForElementByText } from '../utils/actions';
+import { waitForElementByText, getElementByText } from '../utils/actions';
 import { BasePage } from './BasePage';
-import { getElementByText } from '../utils/actions';
 
 type PaymentMethodWithSetupButton =
 	| 'wcpay'
@@ -41,7 +40,11 @@ export class PaymentsSetup extends BasePage {
 	}
 
 	async methodHasBeenSetup( method: PaymentMethod ) {
-		await getElementByText( 'button', 'Manage', `.woocommerce-task-payment-${ method }` )
+		await getElementByText(
+			'button',
+			'Manage',
+			`.woocommerce-task-payment-${ method }`
+		);
 	}
 
 	async enableCashOnDelivery() {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/PermalinkSettings.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export class PermalinkSettings extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/Plugins.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from './BasePage';
 
 export class Plugins extends BasePage {

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/WcHomescreen.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { getElementByText, waitForElementByText } from '../utils/actions';
 import { BasePage } from './BasePage';
 

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/WcSettings.ts

@@ -1,7 +1,13 @@
-import { setCheckbox } from '@woocommerce/e2e-utils';
+/**
+ * Internal dependencies
+ */
 import { getAttribute, waitForElementByText } from '../utils/actions';
 import { BasePage } from './BasePage';
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { setCheckbox } = require( '@woocommerce/e2e-utils' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
 export class WcSettings extends BasePage {
 	url = 'wp-admin/admin.php?page=wc-settings';
 

plugins/woocommerce-admin/packages/admin-e2e-tests/src/pages/WpSettings.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { waitForElementByText } from '../utils/actions';
 import { BasePage } from './BasePage';
 

plugins/woocommerce-admin/packages/admin-e2e-tests/src/sections/onboarding/BusinessSection.ts

@@ -1,7 +1,13 @@
-import { setCheckbox, unsetCheckbox } from '@woocommerce/e2e-utils';
+/**
+ * Internal dependencies
+ */
 import { BasePage } from '../../pages/BasePage';
 import { waitForElementByText } from '../../utils/actions';
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { setCheckbox, unsetCheckbox } = require( '@woocommerce/e2e-utils' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
 export class BusinessSection extends BasePage {
 	async isDisplayed() {
 		await waitForElementByText( 'h2', 'Tell us about your business' );

plugins/woocommerce-admin/packages/admin-e2e-tests/src/sections/onboarding/IndustrySection.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from '../../pages/BasePage';
 import { waitForElementByText } from '../../utils/actions';
 

plugins/woocommerce-admin/packages/admin-e2e-tests/src/sections/onboarding/ProductTypesSection.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from '../../pages/BasePage';
 import { waitForElementByText } from '../../utils/actions';
 

plugins/woocommerce-admin/packages/admin-e2e-tests/src/sections/onboarding/StoreDetailsSection.ts

@@ -1,12 +1,18 @@
-import {
+/**
+ * Internal dependencies
+ */
+import { DropdownTypeaheadField } from '../../elements/DropdownTypeaheadField';
+import { BasePage } from '../../pages/BasePage';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const {
 	setCheckbox,
 	clearAndFillInput,
 	verifyCheckboxIsSet,
 	verifyCheckboxIsUnset,
-} from '@woocommerce/e2e-utils';
+} = require( '@woocommerce/e2e-utils' );
-import { DropdownTypeaheadField } from '../../elements/DropdownTypeaheadField';
-import { BasePage } from '../../pages/BasePage';
 const config = require( 'config' );
+/* eslint-enable @typescript-eslint/no-var-requires */
 
 interface StoreDetails {
 	addressLine1?: string;

plugins/woocommerce-admin/packages/admin-e2e-tests/src/sections/onboarding/ThemeSection.ts

@@ -1,3 +1,6 @@
+/**
+ * Internal dependencies
+ */
 import { BasePage } from '../../pages/BasePage';
 import { waitForElementByText } from '../../utils/actions';
 

plugins/woocommerce-admin/packages/admin-e2e-tests/src/sections/payment-setup/BankAccountTransferSetup.ts

@@ -1,6 +1,12 @@
-import { clearAndFillInput } from '@woocommerce/e2e-utils';
+/**
+ * Internal dependencies
+ */
 import { BasePage } from '../../pages/BasePage';
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { clearAndFillInput } = require( '@woocommerce/e2e-utils' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
 type AccountDetails = {
 	accountName: string;
 	accountNumber: string;

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/activate-and-setup/basic-setup.ts

@@ -0,0 +1,84 @@
+/**
+ * Internal dependencies
+ */
+import { WcSettings } from '../../pages/WcSettings';
+import { WpSettings } from '../../pages/WpSettings';
+import { Login } from '../../pages/Login';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const {
+	clearAndFillInput,
+	verifyValueOfInputField,
+} = require( '@woocommerce/e2e-utils' );
+const {
+	afterAll,
+	beforeAll,
+	describe,
+	it,
+	expect,
+} = require( '@jest/globals' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+const testAdminBasicSetup = () => {
+	describe( 'Store owner can finish initial store setup', () => {
+		const wcSettings = new WcSettings( page );
+		const wpSettings = new WpSettings( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+		} );
+		afterAll( async () => {
+			await login.logout();
+		} );
+
+		it( 'can enable tax rates and calculations', async () => {
+			// Go to general settings page
+			await wcSettings.navigate( 'general' );
+			await wcSettings.enableTaxRates();
+			await wcSettings.saveSettings();
+
+			// Verify that settings have been saved
+			const taxRate = await wcSettings.getTaxRateValue();
+			expect( taxRate ).toEqual( true );
+		} );
+
+		it( 'can configure permalink settings', async () => {
+			// Go to Permalink Settings page
+			await wpSettings.navigate();
+			await wpSettings.openPermalinkSettings();
+
+			// Select "Post name" option in common settings section
+			await page.click( 'input[value="/%postname%/"]' );
+
+			// Select "Custom base" in product permalinks section
+			await page.click( '#woocommerce_custom_selection' );
+
+			// Fill custom base slug to use
+			await clearAndFillInput( '#woocommerce_permalink_structure', '' );
+			await page.type( '#woocommerce_permalink_structure', '/product/' );
+
+			await wpSettings.saveSettings();
+
+			// Verify that settings have been saved
+			await Promise.all( [
+				expect( page ).toMatchElement(
+					'#setting-error-settings_updated',
+					{
+						text: 'Permalink structure updated.',
+					}
+				),
+				verifyValueOfInputField(
+					'#permalink_structure',
+					'/%postname%/'
+				),
+				verifyValueOfInputField(
+					'#woocommerce_permalink_structure',
+					'/product/'
+				),
+			] );
+		} );
+	} );
+};
+
+module.exports = { testAdminBasicSetup };

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/activate-and-setup/complete-onboarding-wizard.ts

@@ -0,0 +1,209 @@
+/**
+ * Internal dependencies
+ */
+import { OnboardingWizard } from '../../pages/OnboardingWizard';
+import { WcHomescreen } from '../../pages/WcHomescreen';
+import { TaskTitles } from '../../constants/taskTitles';
+import { getElementByText } from '../../utils/actions';
+import { Login } from '../../pages/Login';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const {
+	afterAll,
+	beforeAll,
+	describe,
+	it,
+	expect,
+} = require( '@jest/globals' );
+const config = require( 'config' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+/**
+ * This tests a default, happy path for the onboarding wizard.
+ */
+const testAdminOnboardingWizard = () => {
+	describe( 'Store owner can complete onboarding wizard', () => {
+		const profileWizard = new OnboardingWizard( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+		} );
+		afterAll( async () => {
+			await login.logout();
+		} );
+
+		it( 'can start the profile wizard', async () => {
+			await profileWizard.navigate();
+		} );
+
+		it( 'can complete the store details section', async () => {
+			await profileWizard.storeDetails.completeStoreDetailsSection();
+			// Wait for "Continue" button to become active
+			await profileWizard.continue();
+
+			// Wait for usage tracking pop-up window to appear
+			await profileWizard.optionallySelectUsageTracking();
+		} );
+
+		it( 'can complete the industry section', async () => {
+			// Query for the industries checkboxes
+			await profileWizard.industry.isDisplayed( 8 );
+			await profileWizard.industry.uncheckIndustries();
+
+			// Select just "fashion" and "health/beauty" to get the single checkbox business section when
+			// filling out details for a US store.
+			await profileWizard.industry.selectIndustry(
+				'Fashion, apparel, and accessories'
+			);
+			await profileWizard.industry.selectIndustry( 'Health and beauty' );
+
+			await profileWizard.continue();
+		} );
+
+		it( 'can complete the product types section', async () => {
+			await profileWizard.productTypes.isDisplayed( 7 );
+			await profileWizard.productTypes.uncheckProducts();
+
+			// Select Physical and Downloadable products
+			await profileWizard.productTypes.selectProduct(
+				'Physical products'
+			);
+			await profileWizard.productTypes.selectProduct( 'Downloads' );
+
+			await profileWizard.continue();
+		} );
+
+		it( 'can complete the business section', async () => {
+			await profileWizard.business.isDisplayed();
+			await profileWizard.business.selectProductNumber(
+				config.get( 'onboardingwizard.numberofproducts' )
+			);
+			await profileWizard.business.selectCurrentlySelling(
+				config.get( 'onboardingwizard.sellingelsewhere' )
+			);
+
+			await profileWizard.continue();
+		} );
+
+		it( 'can unselect all business features and continue', async () => {
+			await profileWizard.business.freeFeaturesIsDisplayed();
+			// Add WC Pay check
+			await profileWizard.business.expandRecommendedBusinessFeatures();
+
+			expect( page ).toMatchElement( 'a', {
+				text: 'WooCommerce Payments',
+			} );
+
+			await profileWizard.business.uncheckAllRecommendedBusinessFeatures();
+			await profileWizard.continue();
+		} );
+
+		it( 'can complete the theme selection section', async () => {
+			await profileWizard.themes.isDisplayed();
+			await profileWizard.themes.continueWithActiveTheme();
+		} );
+	} );
+};
+
+const testSelectiveBundleWCPay = () => {
+	describe( 'A japanese store can complete the selective bundle install but does not include WCPay.', () => {
+		const profileWizard = new OnboardingWizard( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+		} );
+		afterAll( async () => {
+			await login.logout();
+		} );
+
+		it( 'can start the profile wizard', async () => {
+			await profileWizard.navigate();
+		} );
+
+		it( 'can complete the store details section', async () => {
+			await profileWizard.storeDetails.completeStoreDetailsSection( {
+				countryRegionSubstring: 'japan',
+				countryRegionSelector: 'JP\\:JP01',
+				countryRegion: 'Japan — Hokkaido',
+			} );
+
+			// Wait for "Continue" button to become active
+			await profileWizard.continue();
+
+			// Wait for usage tracking pop-up window to appear
+			await profileWizard.optionallySelectUsageTracking();
+		} );
+
+		// JP:JP01
+		it( 'can choose the "Other" industry', async () => {
+			// Query for the industries checkboxes
+			await profileWizard.industry.isDisplayed();
+			await profileWizard.industry.uncheckIndustries();
+			await profileWizard.industry.selectIndustry( 'Other' );
+			await profileWizard.continue();
+		} );
+
+		it( 'can complete the product types section', async () => {
+			await profileWizard.productTypes.isDisplayed( 7 );
+			await profileWizard.productTypes.uncheckProducts();
+
+			// Select Physical and Downloadable products
+			await profileWizard.productTypes.selectProduct(
+				'Physical products'
+			);
+			await profileWizard.productTypes.selectProduct( 'Downloads' );
+
+			await profileWizard.continue();
+			await page.waitForNavigation( { waitUntil: 'networkidle0' } );
+		} );
+
+		it( 'can complete the business details tab', async () => {
+			await profileWizard.business.isDisplayed();
+
+			await profileWizard.business.selectProductNumber(
+				config.get( 'onboardingwizard.numberofproducts' )
+			);
+			await profileWizard.business.selectCurrentlySelling(
+				config.get( 'onboardingwizard.sellingelsewhere' )
+			);
+
+			await profileWizard.continue();
+		} );
+
+		it( 'can choose not to install any extensions', async () => {
+			await profileWizard.business.freeFeaturesIsDisplayed();
+			// Add WC Pay check
+			await profileWizard.business.expandRecommendedBusinessFeatures();
+
+			expect( page ).not.toMatchElement( 'a', {
+				text: 'WooCommerce Payments',
+			} );
+
+			await profileWizard.business.uncheckAllRecommendedBusinessFeatures();
+			await profileWizard.continue();
+		} );
+
+		it( 'can finish the rest of the wizard successfully', async () => {
+			await profileWizard.themes.isDisplayed();
+
+			//  This navigates to the home screen
+			await profileWizard.themes.continueWithActiveTheme();
+		} );
+
+		it( 'should display the choose payments task, and not the woocommerce payments task', async () => {
+			const homescreen = new WcHomescreen( page );
+			await homescreen.isDisplayed();
+			await homescreen.possiblyDismissWelcomeModal();
+			const tasks = await homescreen.getTaskList();
+			expect( tasks ).toContain( TaskTitles.addPayments );
+			expect( tasks ).not.toContain( TaskTitles.wooPayments );
+		} );
+	} );
+};
+
+module.exports = {
+	testAdminOnboardingWizard,
+	testSelectiveBundleWCPay,
+};

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/analytics/analytics-overview.ts

@@ -0,0 +1,97 @@
+/**
+ * Internal dependencies
+ */
+import { AnalyticsOverview } from '../../pages/AnalyticsOverview';
+import { Login } from '../../pages/Login';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
+
+const testAdminAnalyticsOverview = () => {
+	describe( 'Analytics pages', () => {
+		const analyticsPage = new AnalyticsOverview( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+			await analyticsPage.navigate();
+			await analyticsPage.isDisplayed();
+		} );
+		afterAll( async () => {
+			await login.logout();
+		} );
+
+		it( 'a user should see 3 sections by default - Performance, Charts, and Leaderboards', async () => {
+			const sections = ( await analyticsPage.getSections() ).map(
+				( section ) => section.title
+			);
+			expect( sections ).toContain( 'Performance' );
+			expect( sections ).toContain( 'Charts' );
+			expect( sections ).toContain( 'Leaderboards' );
+		} );
+
+		it( 'should allow a user to remove a section', async () => {
+			await analyticsPage.removeSection( 'Performance' );
+			const sections = ( await analyticsPage.getSections() ).map(
+				( section ) => section.title
+			);
+			expect( sections ).not.toContain( 'Performance' );
+		} );
+
+		it( 'should allow a user to add a section back in', async () => {
+			let sections = ( await analyticsPage.getSections() ).map(
+				( section ) => section.title
+			);
+			expect( sections ).not.toContain( 'Performance' );
+			await analyticsPage.addSection( 'Performance' );
+
+			sections = ( await analyticsPage.getSections() ).map(
+				( section ) => section.title
+			);
+			expect( sections ).toContain( 'Performance' );
+		} );
+
+		describe( 'moving sections', () => {
+			it( 'should not display move up for the top, or move down for the bottom section', async () => {
+				const sections = await analyticsPage.getSections();
+				for ( const section of sections ) {
+					const index = sections.indexOf( section );
+					const menuItems = (
+						await analyticsPage.getEllipsisMenuItems(
+							section.title
+						)
+					 ).map( ( item ) => item.title );
+					if ( index === 0 ) {
+						expect( menuItems ).toContain( 'Move down' );
+						expect( menuItems ).not.toContain( 'Move up' );
+					} else if ( index === sections.length - 1 ) {
+						expect( menuItems ).not.toContain( 'Move down' );
+						expect( menuItems ).toContain( 'Move up' );
+					} else {
+						expect( menuItems ).toContain( 'Move down' );
+						expect( menuItems ).toContain( 'Move up' );
+					}
+					await analyticsPage.closeSectionEllipsis( section.title );
+				}
+			} );
+
+			it( 'should allow a user to move a section down', async () => {
+				const sections = await analyticsPage.getSections();
+				await analyticsPage.moveSectionDown( sections[ 0 ].title );
+				const newSections = await analyticsPage.getSections();
+				expect( sections[ 0 ].title ).toEqual( newSections[ 1 ].title );
+				expect( sections[ 1 ].title ).toEqual( newSections[ 0 ].title );
+			} );
+
+			it( 'should allow a user to move a section up', async () => {
+				const sections = await analyticsPage.getSections();
+				await analyticsPage.moveSectionUp( sections[ 1 ].title );
+				const newSections = await analyticsPage.getSections();
+				expect( sections[ 0 ].title ).toEqual( newSections[ 1 ].title );
+				expect( sections[ 1 ].title ).toEqual( newSections[ 0 ].title );
+			} );
+		} );
+	} );
+};
+
+module.exports = { testAdminAnalyticsOverview };

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/analytics/analytics.ts

@@ -0,0 +1,79 @@
+/**
+ * Internal dependencies
+ */
+import { Analytics } from '../../pages/Analytics';
+import { Login } from '../../pages/Login';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
+
+const testAdminAnalyticsPages = () => {
+	describe( 'Analytics pages', () => {
+		const analyticsPage = new Analytics( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+		} );
+		afterAll( async () => {
+			await login.logout();
+		} );
+
+		it( 'A user can view the analytics overview without it crashing', async () => {
+			await analyticsPage.navigate();
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for products without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'products' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for revenue without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'revenue' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for orders without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'orders' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for variations without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'variations' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for categories without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'categories' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for coupons without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'coupons' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for taxes without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'taxes' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for downloads without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'downloads' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for stock without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'stock' );
+			await analyticsPage.isDisplayed();
+		} );
+
+		it( 'A user can view the analytics for settings without it crashing', async () => {
+			await analyticsPage.navigateToSection( 'settings' );
+			await analyticsPage.isDisplayed();
+		} );
+	} );
+};
+
+module.exports = { testAdminAnalyticsPages };

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/index.ts

@@ -0,0 +1,6 @@
+export * from './activate-and-setup/basic-setup';
+export * from './activate-and-setup/complete-onboarding-wizard';
+export * from './analytics/analytics';
+export * from './analytics/analytics-overview';
+export * from './marketing/coupons';
+export * from './tasks/payment';

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/marketing/coupons.ts

@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { Coupons } from '../../pages/Coupons';
+import { Login } from '../../pages/Login';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+const testAdminCouponsPage = () => {
+	describe( 'Coupons page', () => {
+		const couponsPage = new Coupons( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+		} );
+		afterAll( async () => {
+			await login.logout();
+		} );
+
+		it( 'A user can view the coupons overview without it crashing', async () => {
+			await couponsPage.navigate();
+			await couponsPage.isDisplayed();
+		} );
+	} );
+};
+
+module.exports = { testAdminCouponsPage };

plugins/woocommerce-admin/packages/admin-e2e-tests/src/specs/tasks/payment.ts

@@ -0,0 +1,68 @@
+/**
+ * Internal dependencies
+ */
+import { Login } from '../../pages/Login';
+import { OnboardingWizard } from '../../pages/OnboardingWizard';
+import { PaymentsSetup } from '../../pages/PaymentsSetup';
+import { WcHomescreen } from '../../pages/WcHomescreen';
+import { BankAccountTransferSetup } from '../../sections/payment-setup/BankAccountTransferSetup';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { afterAll, beforeAll, describe, it } = require( '@jest/globals' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+const testAdminPaymentSetupTask = () => {
+	describe( 'Payment setup task', () => {
+		const profileWizard = new OnboardingWizard( page );
+		const homeScreen = new WcHomescreen( page );
+		const paymentsSetup = new PaymentsSetup( page );
+		const bankTransferSetup = new BankAccountTransferSetup( page );
+		const login = new Login( page );
+
+		beforeAll( async () => {
+			await login.login();
+
+			// This makes this test more isolated, by always navigating to the
+			// profile wizard and skipping, this behaves the same as if the
+			// profile wizard had not been run yet and the user is redirected
+			// to it when trying to go to wc-admin.
+			await profileWizard.navigate();
+			await profileWizard.skipStoreSetup();
+
+			await homeScreen.isDisplayed();
+			await homeScreen.possiblyDismissWelcomeModal();
+		} );
+
+		afterAll( async () => {
+			await login.logout();
+		} );
+
+		it( 'Can visit the payment setup task from the homescreen if the setup wizard has been skipped', async () => {
+			await homeScreen.clickOnTaskList( 'Set up payments' );
+			await paymentsSetup.closeHelpModal();
+			await paymentsSetup.isDisplayed();
+		} );
+
+		it( 'Saving valid bank account transfer details enables the payment method', async () => {
+			await paymentsSetup.goToPaymentMethodSetup( 'bacs' );
+			await bankTransferSetup.saveAccountDetails( {
+				accountNumber: '1234',
+				accountName: 'Savings',
+				bankName: 'TestBank',
+				sortCode: '12',
+				iban: '12 3456 7890',
+				swiftCode: 'ABBA',
+			} );
+
+			await paymentsSetup.isDisplayed();
+			await paymentsSetup.methodHasBeenSetup( 'bacs' );
+		} );
+
+		it( 'Enabling cash on delivery enables the payment method', async () => {
+			await paymentsSetup.enableCashOnDelivery();
+			await paymentsSetup.methodHasBeenSetup( 'cod' );
+		} );
+	} );
+};
+
+module.exports = { testAdminPaymentSetupTask };

plugins/woocommerce-admin/packages/admin-e2e-tests/src/utils/actions.ts

@@ -1,5 +1,12 @@
+/**
+ * External dependencies
+ */
 import { ElementHandle } from 'puppeteer';
 
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { expect } = require( '@jest/globals' );
+/* eslint-enable @typescript-eslint/no-var-requires */
+
 /**
  * Wait for UI blocking to end.
  */

plugins/woocommerce-admin/packages/admin-e2e-tests/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "types": [ "node", "jest" ],
+    "rootDir": "src", 
+    "outDir": "build",
+	"noEmit": false,
+    "target": "es5"
+  },
+  "include": [ "src/" ]
+}

plugins/woocommerce-admin/packages/components/package.json

@@ -41,6 +41,7 @@
 		"@wordpress/i18n": "3.17.0",
 		"@wordpress/icons": "^2.10.3",
 		"@wordpress/keycodes": "2.18.0",
+		"@wordpress/url": "2.21.0",
 		"@wordpress/viewport": "2.24.0",
 		"classnames": "^2.3.1",
 		"core-js": "3.9.1",

plugins/woocommerce-admin/packages/data/package.json

@@ -23,8 +23,15 @@
 	"dependencies": {
 		"@woocommerce/date": "file:../date",
 		"@woocommerce/navigation": "file:../navigation",
+		"@wordpress/api-fetch": "2.2.8",
+		"@wordpress/compose": "3.23.1",
 		"@wordpress/core-data": "3.0.0",
+		"@wordpress/element": "2.19.0",
+		"@wordpress/hooks": "2.11.0",
+		"@wordpress/data": "5.0.0",
+		"@wordpress/data-controls": "2.0.0",
 		"@wordpress/i18n": "3.17.0",
+		"@wordpress/url": "2.21.0",
 		"md5": "^2.3.0",
 		"rememo": "^3.0.0"
 	},

plugins/woocommerce-admin/packages/navigation/package.json

@@ -22,6 +22,12 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@woocommerce/experimental": "file:../experimental",
+		"@wordpress/api-fetch": "2.2.8",
+		"@wordpress/compose": "3.23.1",
+		"@wordpress/notices": "1.12.0",
+		"@wordpress/components": "11.1.3",
+		"@wordpress/hooks": "2.11.0",
+		"@wordpress/url": "2.21.0",
 		"history": "4.10.1",
 		"qs": "6.9.6"
 	},

plugins/woocommerce-admin/tests/e2e/config/default.json

@@ -1,5 +1,6 @@
 {
   "url": "http://localhost:8084/",
+  "appName": "woocommerce-admin-e2e",
   "users": {
     "admin": {
       "username": "admin",

plugins/woocommerce-admin/tests/e2e/config/jest.config.js

@@ -2,9 +2,9 @@ const path = require( 'path' );
 const { useE2EJestConfig } = require( '@woocommerce/e2e-environment' );
 
 const config = useE2EJestConfig( {
-	moduleFileExtensions: [ 'js', 'ts' ],
+	moduleFileExtensions: [ 'js', 'ts', 'tsx' ],
 	roots: [ path.resolve( __dirname, '../specs' ) ],
-	testMatch: [ '**/*.(test|spec).(j|t)s', '*.(test|spec).(j|t)s' ],
+	testMatch: [ '**/*.(test|spec).(js|ts|tsx)', '*.(test|spec).(js|ts|tsx)' ],
 	testTimeout: 30000,
 	transform: {
 		'\\.[jt]sx?$': [

plugins/woocommerce-admin/tests/e2e/specs/activate-and-setup/basic-setup.test.ts

@@ -1,68 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	clearAndFillInput,
-	verifyValueOfInputField,
-} from '@woocommerce/e2e-utils';
-
-/**
- * Internal dependencies
- */
-import { WcSettings } from '../../pages/WcSettings';
-import { WpSettings } from '../../pages/WpSettings';
-import { Login } from '../../pages/Login';
-
-describe( 'Store owner can finish initial store setup', () => {
-	const wcSettings = new WcSettings( page );
-	const wpSettings = new WpSettings( page );
-	const login = new Login( page );
-
-	beforeAll( async () => {
-		await login.login();
-	} );
-	afterAll( async () => {
-		await login.logout();
-	} );
-
-	it( 'can enable tax rates and calculations', async () => {
-		// Go to general settings page
-		await wcSettings.navigate( 'general' );
-		await wcSettings.enableTaxRates();
-		await wcSettings.saveSettings();
-
-		// Verify that settings have been saved
-		const taxRate = await wcSettings.getTaxRateValue();
-		expect( taxRate ).toEqual( true );
-	} );
-
-	it( 'can configure permalink settings', async () => {
-		// Go to Permalink Settings page
-		await wpSettings.navigate();
-		await wpSettings.openPermalinkSettings();
-
-		// Select "Post name" option in common settings section
-		await page.click( 'input[value="/%postname%/"]' );
-
-		// Select "Custom base" in product permalinks section
-		await page.click( '#woocommerce_custom_selection' );
-
-		// Fill custom base slug to use
-		await clearAndFillInput( '#woocommerce_permalink_structure', '' );
-		await page.type( '#woocommerce_permalink_structure', '/product/' );
-
-		await wpSettings.saveSettings();
-
-		// Verify that settings have been saved
-		await Promise.all( [
-			expect( page ).toMatchElement( '#setting-error-settings_updated', {
-				text: 'Permalink structure updated.',
-			} ),
-			verifyValueOfInputField( '#permalink_structure', '/%postname%/' ),
-			verifyValueOfInputField(
-				'#woocommerce_permalink_structure',
-				'/product/'
-			),
-		] );
-	} );
-} );

plugins/woocommerce-admin/tests/e2e/specs/activate-and-setup/basic-setup.test.tsx

@@ -0,0 +1,3 @@
+const { testAdminBasicSetup } = require( '@woocommerce/admin-e2e-tests' );
+
+testAdminBasicSetup();

plugins/woocommerce-admin/tests/e2e/specs/activate-and-setup/complete-onboarding-wizard.test.ts

@@ -1,187 +0,0 @@
-/**
- * Internal dependencies
- */
-import { OnboardingWizard } from '../../pages/OnboardingWizard';
-import { WcHomescreen } from '../../pages/WcHomescreen';
-import { TaskTitles } from '../../constants/taskTitles';
-import { getElementByText } from '../../utils/actions';
-import { Login } from '../../pages/Login';
-
-const config = require( 'config' );
-
-/**
- * This tests a default, happy path for the onboarding wizard.
- */
-describe( 'Store owner can complete onboarding wizard', () => {
-	const profileWizard = new OnboardingWizard( page );
-	const login = new Login( page );
-
-	beforeAll( async () => {
-		await login.login();
-	} );
-	afterAll( async () => {
-		await login.logout();
-	} );
-
-	it( 'can start the profile wizard', async () => {
-		await profileWizard.navigate();
-	} );
-
-	it( 'can complete the store details section', async () => {
-		await profileWizard.storeDetails.completeStoreDetailsSection();
-		// Wait for "Continue" button to become active
-		await profileWizard.continue();
-
-		// Wait for usage tracking pop-up window to appear
-		await profileWizard.optionallySelectUsageTracking();
-	} );
-
-	it( 'can complete the industry section', async () => {
-		// Query for the industries checkboxes
-		await profileWizard.industry.isDisplayed( 8 );
-		await profileWizard.industry.uncheckIndustries();
-
-		// Select just "fashion" and "health/beauty" to get the single checkbox business section when
-		// filling out details for a US store.
-		await profileWizard.industry.selectIndustry(
-			'Fashion, apparel, and accessories'
-		);
-		await profileWizard.industry.selectIndustry( 'Health and beauty' );
-
-		await profileWizard.continue();
-	} );
-
-	it( 'can complete the product types section', async () => {
-		await profileWizard.productTypes.isDisplayed( 7 );
-		await profileWizard.productTypes.uncheckProducts();
-
-		// Select Physical and Downloadable products
-		await profileWizard.productTypes.selectProduct( 'Physical products' );
-		await profileWizard.productTypes.selectProduct( 'Downloads' );
-
-		await profileWizard.continue();
-	} );
-
-	it( 'can complete the business section', async () => {
-		await profileWizard.business.isDisplayed();
-		await profileWizard.business.selectProductNumber(
-			config.get( 'onboardingwizard.numberofproducts' )
-		);
-		await profileWizard.business.selectCurrentlySelling(
-			config.get( 'onboardingwizard.sellingelsewhere' )
-		);
-
-		await profileWizard.continue();
-	} );
-
-	it( 'can unselect all business features and continue', async () => {
-		await profileWizard.business.freeFeaturesIsDisplayed();
-		// Add WC Pay check
-		await profileWizard.business.expandRecommendedBusinessFeatures();
-
-		expect( page ).toMatchElement( 'a', {
-			text: 'WooCommerce Payments',
-		} );
-
-		await profileWizard.business.uncheckAllRecommendedBusinessFeatures();
-		await profileWizard.continue();
-	} );
-
-	it( 'can complete the theme selection section', async () => {
-		await profileWizard.themes.isDisplayed();
-		await profileWizard.themes.continueWithActiveTheme();
-	} );
-} );
-
-describe( 'A japanese store can complete the selective bundle install but does not include WCPay. ', () => {
-	const profileWizard = new OnboardingWizard( page );
-	const login = new Login( page );
-
-	beforeAll( async () => {
-		await login.login();
-	} );
-	afterAll( async () => {
-		await login.logout();
-	} );
-
-	it( 'can start the profile wizard', async () => {
-		await profileWizard.navigate();
-	} );
-
-	it( 'can complete the store details section', async () => {
-		await profileWizard.storeDetails.completeStoreDetailsSection( {
-			countryRegionSubstring: 'japan',
-			countryRegionSelector: 'JP\\:JP01',
-			countryRegion: 'Japan — Hokkaido',
-		} );
-
-		// Wait for "Continue" button to become active
-		await profileWizard.continue();
-
-		// Wait for usage tracking pop-up window to appear
-		await profileWizard.optionallySelectUsageTracking();
-	} );
-
-	// JP:JP01
-	it( 'can choose the "Other" industry', async () => {
-		// Query for the industries checkboxes
-		await profileWizard.industry.isDisplayed();
-		await profileWizard.industry.uncheckIndustries();
-		await profileWizard.industry.selectIndustry( 'Other' );
-		await profileWizard.continue();
-	} );
-
-	it( 'can complete the product types section', async () => {
-		await profileWizard.productTypes.isDisplayed( 7 );
-		await profileWizard.productTypes.uncheckProducts();
-
-		// Select Physical and Downloadable products
-		await profileWizard.productTypes.selectProduct( 'Physical products' );
-		await profileWizard.productTypes.selectProduct( 'Downloads' );
-
-		await profileWizard.continue();
-		await page.waitForNavigation( { waitUntil: 'networkidle0' } );
-	} );
-
-	it( 'can complete the business details tab', async () => {
-		await profileWizard.business.isDisplayed();
-
-		await profileWizard.business.selectProductNumber(
-			config.get( 'onboardingwizard.numberofproducts' )
-		);
-		await profileWizard.business.selectCurrentlySelling(
-			config.get( 'onboardingwizard.sellingelsewhere' )
-		);
-
-		await profileWizard.continue();
-	} );
-
-	it( 'can choose not to install any extensions', async () => {
-		await profileWizard.business.freeFeaturesIsDisplayed();
-		// Add WC Pay check
-		await profileWizard.business.expandRecommendedBusinessFeatures();
-
-		expect( page ).not.toMatchElement( 'a', {
-			text: 'WooCommerce Payments',
-		} );
-
-		await profileWizard.business.uncheckAllRecommendedBusinessFeatures();
-		await profileWizard.continue();
-	} );
-
-	it( 'can finish the rest of the wizard successfully', async () => {
-		await profileWizard.themes.isDisplayed();
-
-		//  This navigates to the home screen
-		await profileWizard.themes.continueWithActiveTheme();
-	} );
-
-	it( 'should display the choose payments task, and not the woocommerce payments task', async () => {
-		const homescreen = new WcHomescreen( page );
-		await homescreen.isDisplayed();
-		await homescreen.possiblyDismissWelcomeModal();
-		const tasks = await homescreen.getTaskList();
-		expect( tasks ).toContain( TaskTitles.addPayments );
-		expect( tasks ).not.toContain( TaskTitles.wooPayments );
-	} );
-} );

plugins/woocommerce-admin/tests/e2e/specs/activate-and-setup/complete-onboarding-wizard.test.tsx

@@ -0,0 +1,7 @@
+const {
+	testAdminOnboardingWizard,
+	testSelectiveBundleWCPay,
+} = require( '@woocommerce/admin-e2e-tests' );
+
+testAdminOnboardingWizard();
+testSelectiveBundleWCPay();

plugins/woocommerce-admin/tests/e2e/specs/analytics/analytics-overview.test.ts

@@ -1,88 +0,0 @@
-/**
- * Internal dependencies
- */
-import { AnalyticsOverview } from '../../pages/AnalyticsOverview';
-import { Login } from '../../pages/Login';
-
-describe( 'Analytics pages', () => {
-	const analyticsPage = new AnalyticsOverview( page );
-	const login = new Login( page );
-
-	beforeAll( async () => {
-		await login.login();
-		await analyticsPage.navigate();
-		await analyticsPage.isDisplayed();
-	} );
-	afterAll( async () => {
-		await login.logout();
-	} );
-
-	it( 'a user should see 3 sections by default - Performance, Charts, and Leaderboards', async () => {
-		const sections = ( await analyticsPage.getSections() ).map(
-			( section ) => section.title
-		);
-		expect( sections ).toContain( 'Performance' );
-		expect( sections ).toContain( 'Charts' );
-		expect( sections ).toContain( 'Leaderboards' );
-	} );
-
-	it( 'should allow a user to remove a section', async () => {
-		await analyticsPage.removeSection( 'Performance' );
-		const sections = ( await analyticsPage.getSections() ).map(
-			( section ) => section.title
-		);
-		expect( sections ).not.toContain( 'Performance' );
-	} );
-
-	it( 'should allow a user to add a section back in', async () => {
-		let sections = ( await analyticsPage.getSections() ).map(
-			( section ) => section.title
-		);
-		expect( sections ).not.toContain( 'Performance' );
-		await analyticsPage.addSection( 'Performance' );
-
-		sections = ( await analyticsPage.getSections() ).map(
-			( section ) => section.title
-		);
-		expect( sections ).toContain( 'Performance' );
-	} );
-
-	describe( 'moving sections', () => {
-		it( 'should not display move up for the top, or move down for the bottom section', async () => {
-			const sections = await analyticsPage.getSections();
-			for ( const section of sections ) {
-				const index = sections.indexOf( section );
-				const menuItems = (
-					await analyticsPage.getEllipsisMenuItems( section.title )
-				 ).map( ( item ) => item.title );
-				if ( index === 0 ) {
-					expect( menuItems ).toContain( 'Move down' );
-					expect( menuItems ).not.toContain( 'Move up' );
-				} else if ( index === sections.length - 1 ) {
-					expect( menuItems ).not.toContain( 'Move down' );
-					expect( menuItems ).toContain( 'Move up' );
-				} else {
-					expect( menuItems ).toContain( 'Move down' );
-					expect( menuItems ).toContain( 'Move up' );
-				}
-				await analyticsPage.closeSectionEllipsis( section.title );
-			}
-		} );
-
-		it( 'should allow a user to move a section down', async () => {
-			const sections = await analyticsPage.getSections();
-			await analyticsPage.moveSectionDown( sections[ 0 ].title );
-			const newSections = await analyticsPage.getSections();
-			expect( sections[ 0 ].title ).toEqual( newSections[ 1 ].title );
-			expect( sections[ 1 ].title ).toEqual( newSections[ 0 ].title );
-		} );
-
-		it( 'should allow a user to move a section up', async () => {
-			const sections = await analyticsPage.getSections();
-			await analyticsPage.moveSectionUp( sections[ 1 ].title );
-			const newSections = await analyticsPage.getSections();
-			expect( sections[ 0 ].title ).toEqual( newSections[ 1 ].title );
-			expect( sections[ 1 ].title ).toEqual( newSections[ 0 ].title );
-		} );
-	} );
-} );

plugins/woocommerce-admin/tests/e2e/specs/analytics/analytics-overview.test.tsx

@@ -0,0 +1,3 @@
+const { testAdminAnalyticsOverview } = require( '@woocommerce/admin-e2e-tests' );
+
+testAdminAnalyticsOverview();

plugins/woocommerce-admin/tests/e2e/specs/analytics/analytics.test.ts

@@ -1,72 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Analytics } from '../../pages/Analytics';
-import { Login } from '../../pages/Login';
-
-describe( 'Analytics pages', () => {
-	const analyticsPage = new Analytics( page );
-	const login = new Login( page );
-
-	beforeAll( async () => {
-		await login.login();
-	} );
-	afterAll( async () => {
-		await login.logout();
-	} );
-
-	it( 'A user can view the analytics overview without it crashing', async () => {
-		await analyticsPage.navigate();
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for products without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'products' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for revenue without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'revenue' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for orders without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'orders' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for variations without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'variations' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for categories without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'categories' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for coupons without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'coupons' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for taxes without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'taxes' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for downloads without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'downloads' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for stock without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'stock' );
-		await analyticsPage.isDisplayed();
-	} );
-
-	it( 'A user can view the analytics for settings without it crashing', async () => {
-		await analyticsPage.navigateToSection( 'settings' );
-		await analyticsPage.isDisplayed();
-	} );
-} );

plugins/woocommerce-admin/tests/e2e/specs/analytics/analytics.test.tsx

@@ -0,0 +1,3 @@
+const { testAdminAnalyticsPages } = require( '@woocommerce/admin-e2e-tests' );
+
+testAdminAnalyticsPages();

plugins/woocommerce-admin/tests/e2e/specs/marketing/coupons.test.ts

@@ -1,23 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Coupons } from '../../pages/Coupons';
-import { Login } from '../../pages/Login';
-
-describe( 'Coupons page', () => {
-	const couponsPage = new Coupons( page );
-	const login = new Login( page );
-
-	beforeAll( async () => {
-		await login.login();
-	} );
-
-	afterAll( async () => {
-		await login.logout();
-	} );
-
-	it( 'A user can view the coupons overview without it crashing', async () => {
-		await couponsPage.navigate();
-		await couponsPage.isDisplayed();
-	} );
-} );

plugins/woocommerce-admin/tests/e2e/specs/marketing/coupons.test.tsx

@@ -0,0 +1,3 @@
+const { testAdminCouponsPage } = require( '@woocommerce/admin-e2e-tests' );
+
+testAdminCouponsPage();

plugins/woocommerce-admin/tests/e2e/specs/tasks/payment.test.ts

@@ -1,60 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Login } from '../../pages/Login';
-import { OnboardingWizard } from '../../pages/OnboardingWizard';
-import { PaymentsSetup } from '../../pages/PaymentsSetup';
-import { WcHomescreen } from '../../pages/WcHomescreen';
-import { BankAccountTransferSetup } from '../../sections/payment-setup/BankAccountTransferSetup';
-
-describe( 'Payment setup task', () => {
-	const profileWizard = new OnboardingWizard( page );
-	const homeScreen = new WcHomescreen( page );
-	const paymentsSetup = new PaymentsSetup( page );
-	const bankTransferSetup = new BankAccountTransferSetup( page );
-	const login = new Login( page );
-
-	beforeAll( async () => {
-		await login.login();
-
-		// This makes this test more isolated, by always navigating to the
-		// profile wizard and skipping, this behaves the same as if the
-		// profile wizard had not been run yet and the user is redirected
-		// to it when trying to go to wc-admin.
-		await profileWizard.navigate();
-		await profileWizard.skipStoreSetup();
-
-		await homeScreen.isDisplayed();
-		await homeScreen.possiblyDismissWelcomeModal();
-	} );
-
-	afterAll( async () => {
-		await login.logout();
-	} );
-
-	it( 'Can visit the payment setup task from the homescreen if the setup wizard has been skipped', async () => {
-		await homeScreen.clickOnTaskList( 'Set up payments' );
-		await paymentsSetup.closeHelpModal();
-		await paymentsSetup.isDisplayed();
-	} );
-
-	it( 'Saving valid bank account transfer details enables the payment method', async () => {
-		await paymentsSetup.goToPaymentMethodSetup( 'bacs' );
-		await bankTransferSetup.saveAccountDetails( {
-			accountNumber: '1234',
-			accountName: 'Savings',
-			bankName: 'TestBank',
-			sortCode: '12',
-			iban: '12 3456 7890',
-			swiftCode: 'ABBA',
-		} );
-
-		await paymentsSetup.isDisplayed();
-		await paymentsSetup.methodHasBeenSetup( 'bacs' );
-	} );
-
-	it( 'Enabling cash on delivery enables the payment method', async () => {
-		await paymentsSetup.enableCashOnDelivery();
-		await paymentsSetup.methodHasBeenSetup( 'cod' );
-	} );
-} );

plugins/woocommerce-admin/tests/e2e/specs/tasks/payment.test.tsx

@@ -0,0 +1,3 @@
+const { testAdminPaymentSetupTask } = require( '@woocommerce/admin-e2e-tests' );
+
+testAdminPaymentSetupTask();