Merge pull request #12274 from mozilla/create-login-subscription-test

test(subscription) : Subscription flow tests using playwright

.circleci/config.yml

@@ -235,7 +235,7 @@ jobs:
   production-smoke-tests:
     resource_class: medium+
     docker:
-      - image: mcr.microsoft.com/playwright:v1.18.0-focal
+      - image: mcr.microsoft.com/playwright:v1.20.0-focal
     steps:
       - base-install
       - run:
@@ -249,7 +249,7 @@ jobs:
   playwright-functional-tests:
     resource_class: large
     docker:
-      - image: mcr.microsoft.com/playwright:v1.18.0-focal
+      - image: mcr.microsoft.com/playwright:v1.20.0-focal
       - image: redis
       - image: memcached
       - image: cimg/mysql:5.7

packages/functional-tests/package.json

@@ -10,14 +10,14 @@
     "test-production": "playwright test --project=production"
   },
   "devDependencies": {
-    "@playwright/test": "^1.18.0",
+    "@playwright/test": "^1.20.0",
     "@types/upng-js": "^2",
     "fxa-auth-client": "workspace:*",
     "fxa-content-server": "workspace:*",
     "fxa-payments-server": "workspace:*",
     "fxa-settings": "workspace:*",
     "jsqr": "^1.4.0",
-    "playwright": "^1.18.0",
+    "playwright": "^1.20.0",
     "upng-js": "^2.1.0"
   }
 }

packages/functional-tests/pages/products/index.ts

@@ -7,16 +7,50 @@ export class SubscribePage extends BaseLayout {
 
   async setCreditCardInfo() {
     const frame = this.page.frame({ url: /elements-inner-card/ });
+    await frame.fill('.InputElement[name=cardnumber]', '');
     await frame.fill('.InputElement[name=cardnumber]', '4242424242424242');
     await frame.fill('.InputElement[name=exp-date]', '555');
     await frame.fill('.InputElement[name=cvc]', '333');
     await frame.fill('.InputElement[name=postal]', '66666');
     await this.page.check('input[type=checkbox]');
+    await this.page.click('button[type=submit]');
+  }
+
+  async setFailedCreditCardInfo() {
+    const frame = this.page.frame({ url: /elements-inner-card/ });
+    await frame.fill('.InputElement[name=cardnumber]', '4000000000000341');
+    await frame.fill('.InputElement[name=exp-date]', '666');
+    await frame.fill('.InputElement[name=cvc]', '444');
+    await frame.fill('.InputElement[name=postal]', '77777');
+    await this.page.check('input[type=checkbox]');
+    await this.page.click('button[type=submit]');
+  }
+
+  async setPayPalInfo() {
+    await this.page.check('[data-testid="confirm"]');
+    const [paypalWindow] = await Promise.all([
+      this.page.waitForEvent('popup'),
+      this.page.click('[data-testid="paypal-button-container"]'),
+    ]);
+    await paypalWindow.waitForLoadState('load');
+    await paypalWindow.fill(
+      'input[type=email]',
+      'qa-test-no-balance-16@personal.example.com'
+    );
+    await paypalWindow.click('button[id=btnNext]');
+    await paypalWindow.waitForLoadState('load');
+    await paypalWindow.fill('input[type=password]', 'Ah4SboP6UDZx95I');
+    await paypalWindow.click('button[id=btnLogin]');
+    await paypalWindow.click('button[id=consentButton]');
+  }
+
+  async clickTryAgain() {
+    this.page.click('[data-testid="retry-link"]');
   }
 
   submit() {
     return Promise.all([
-      this.page.click('button[type=submit]'),
+      this.page.waitForLoadState(),
       this.page.waitForResponse(
         (r) =>
           r.request().method() === 'GET' &&

packages/functional-tests/pages/relier.ts

@@ -26,7 +26,7 @@ export class RelierPage extends BaseLayout {
   clickEmailFirst() {
     return Promise.all([
       this.page.click('button.email-first-button'),
-      this.page.waitForNavigation(),
+      this.page.waitForNavigation({ waitUntil: 'load' }),
     ]);
   }
 

packages/functional-tests/tests/misc.spec.ts

@@ -1,22 +1,6 @@
 import { test, expect } from '../lib/fixtures/standard';
 
 test.describe('severity-1', () => {
-  test('subscribe and login to product', async ({
-    pages: { relier, login, subscribe },
-  }, { project }) => {
-    test.skip(project.name === 'production', 'prod needs a valid credit card');
-    test.slow();
-    await relier.goto();
-    await relier.clickSubscribe();
-    await subscribe.setFullName();
-    await subscribe.setCreditCardInfo();
-    await subscribe.submit();
-    await relier.goto();
-    await relier.clickEmailFirst();
-    await login.submit();
-    expect(await relier.isPro()).toBe(true);
-  });
-
   test('content-server mocha tests', async ({ target, page }, { project }) => {
     test.skip(project.name !== 'local', 'mocha tests are local only');
     test.slow();

packages/functional-tests/tests/subscription.spec.ts

@@ -0,0 +1,55 @@
+import { test, expect } from '../lib/fixtures/standard';
+
+test.describe('severity-1', () => {
+  test('subscribe with credit card and login to product', async ({
+    pages: { relier, login, subscribe },
+  }, { project }) => {
+    test.skip(project.name === 'production', 'prod needs a valid credit card');
+    test.skip(project.name === 'local', 'No need to be run on local');
+    test.slow();
+    await relier.goto();
+    await relier.clickSubscribe();
+    await subscribe.setFullName();
+    await subscribe.setCreditCardInfo();
+    await subscribe.submit();
+    await relier.goto();
+    await relier.clickEmailFirst();
+    await login.submit();
+    expect(await relier.isPro()).toBe(true);
+  });
+
+  test('subscribe with credit card after initial failed subscription', async ({
+    pages: { relier, login, subscribe },
+  }, { project }) => {
+    test.skip(project.name === 'production', 'prod needs a valid credit card');
+    test.skip(project.name === 'local', 'No need to be run on local');
+    test.slow();
+    await relier.goto();
+    await relier.clickSubscribe();
+    await subscribe.setFullName();
+    await subscribe.setFailedCreditCardInfo();
+    await subscribe.clickTryAgain();
+    await subscribe.setCreditCardInfo();
+    await subscribe.submit();
+    await relier.goto();
+    await relier.clickEmailFirst();
+    await login.submit();
+    expect(await relier.isPro()).toBe(true);
+  });
+
+  test('subscribe with paypal and login to product', async ({
+    pages: { relier, login, subscribe },
+  }, { project }) => {
+    test.skip(project.name === 'production', 'prod needs a valid credit card');
+    test.skip(project.name === 'local', 'No need to be run on local');
+    test.slow();
+    await relier.goto();
+    await relier.clickSubscribe();
+    await subscribe.setPayPalInfo();
+    await subscribe.submit();
+    await relier.goto();
+    await relier.clickEmailFirst();
+    await login.submit();
+    expect(await relier.isPro()).toBe(true);
+  });
+});