MWPW-160756: Setup Nala tests for studio (#116)

* MWPW-160756: Setup Nala tests for studio

* update setup for PRs

* run lint

* sync package-lock.json

* fix nala project names

* fix test

* add upload artifacts on failure

* change version

* debug failure

* add locators and more tests

* remove redundant lines

* add a readme doc and a fix for chromium

* remove config for FF and Webkit

* adjust test for new studio design

* add to take screenshot on failure

* disable check for recenlty updated until it is stable

---------

Co-authored-by: Mariia Lukianets <mariia.lukianets@gmail.com>

.github/README.md

@@ -0,0 +1,22 @@
+# SSH into GH actions
+## action code
+If you need to debug your action you can add this snippet to the workflow:
+```
+- name: Setup tmate session
+    uses: mxschmitt/action-tmate@v3
+    with:
+        limit-access-to-actor: true
+```
+once you push to the branch you can find an ssh connection string in action logs.
+
+## github account setup
+you will need to have generated pair of SSH keys on your machine.
+Follow this docu: https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account
+check for existing keys, if doesn't exist generate a pair and add a public one to your github account.
+
+## SSH out!
+If you are in the office network or using VPN - don't forget to SSH out:
+1. Go to this site
+http://sanjose-ssh-out.corp.adobe.com/ (HTTP not HTTPS)
+2. Log in using your adobenet ID and "One time password token"
+3. After logging in, you should get the confirmation message saying that "Authentication successfully. You may now SSH or SCP to an Internet host...."

.github/workflows/run-nala.yml

@@ -0,0 +1,54 @@
+name: Run Nala Tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+    types: [opened, synchronize, reopened]
+
+jobs:
+  run-nala-tests:
+    name: Running Nala E2E UI Tests
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x]
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 2
+
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Set execute permission for pr.run.sh
+        run: chmod +x ./nala/utils/pr.run.sh
+
+      - name: Run Nala Tests via pr.run.sh
+        run: ./nala/utils/pr.run.sh
+        env:
+          labels: ${{ join(github.event.pull_request.labels.*.name, ' ') }}
+          branch: ${{ github.event.pull_request.head.ref }}
+          repoName: ${{ github.repository }}
+          prUrl: ${{ github.event.pull_request.head.repo.html_url }}
+          prOrg: ${{ github.event.pull_request.head.repo.owner.login }}
+          prRepo: ${{ github.event.pull_request.head.repo.name }}
+          prBranch: ${{ github.event.pull_request.head.ref }}
+          prBaseBranch: ${{ github.event.pull_request.base.ref }}
+          GITHUB_ACTION_PATH: ${{ github.workspace }}
+          IMS_EMAIL: ${{ secrets.IMS_EMAIL }}
+          IMS_PASS: ${{ secrets.IMS_PASS }}
+
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: test-results
+          path: test-results
+          retention-days: 7

.gitignore

@@ -20,6 +20,8 @@ swc.json
 studio.json
 *.key
 *.crt
+test-html-results/
+test-results/
 
 # IO Runtime Config
 config.json

README.md

@@ -39,6 +39,24 @@ Refer to the corresponding README.md under any of the packages:
 * studio - M@S Studio for creating, updating and publishing merch fragments
 * ost-audit - crawls EDS pages HTML for OST links and generates a CSV report
 
+## Nala E2E tests
+for initial setup:
+```
+npm install
+npx playwright install
+export IMS_EMAIL=<val>
+export IMS_PASS=<val>
+```
+Ask colleagues/slack for IMS_EMAIL ad IMS_PASS values, your user might not work as expected because it's not '@adobetest.com' account.
+
+`npm run nala local` - to run on local
+`npm run nala MWPW-160756` - to run on branch
+`npm run nala MWPW-160756 mode=ui` - ui mode
+
+Beware that 'npm run nala' runs `node nala/utils/nala.run.js`, it's not the script that GH action does. 
+If you want to debug GH action script run sh `nala/utils/pr.run.sh`
+# CI/CD
+documented in .github/README.md
 
 #### Troubleshooting
 Please reach out to us in `#tacocat-friends` for any questions.

nala/.nala-snippets/spec-snippet.code-snippets

@@ -0,0 +1,25 @@
+{
+  "Create Nala Spec": {
+    "prefix": "create nala spec",
+    "body": [
+      "module.exports = {",
+      "  FeatureName: '${1:Block or Feature Name}',",
+      "  features: [",
+      "    {",
+      "      tcid: '0',",
+      "      name: '@${2:spec-name}',",
+      "      path: '/drafts/nala/[${3:test-page-path}]',",
+      "      data: {",
+      "        attribute-1: '${4:value}',",
+      "        attribute-2: '${5:value}',",
+      "        attribute-3: '${6:value}',",
+      "      },",
+      "      tags: '@Block  @smoke @regression @dme',",
+      "    },",
+      "  ],",
+      "};"
+    ],
+    "description": "Create a Nala spec with block name or feature name"
+  }
+}
+

nala/libs/baseurl.js

@@ -0,0 +1,19 @@
+
+import pkg from 'axios';
+
+const { head } = pkg;
+export async function isBranchURLValid(url) {
+  try {
+    const response = await head(url);
+    if (response.status === 200) {
+      console.info(`\nURL (${url}) returned a 200 status code. It is valid.`);
+      return true;
+    } else {
+      console.info(`\nURL (${url}) returned a non-200 status code (${response.status}). It is invalid.`);
+      return false;
+    }
+  } catch (error) {
+    console.info(`\nError checking URL (${url}): returned a non-200 status code (${response.status})`);
+    return false;
+  }
+}

nala/libs/imslogin.js

@@ -0,0 +1,31 @@
+/* eslint-disable import/no-import-module-exports */
+import { expect } from '@playwright/test';
+
+async function fillOutSignInForm(props, page) {
+  expect(process.env.IMS_EMAIL, 'ERROR: No environment variable for email provided for IMS Test.').toBeTruthy();
+  expect(process.env.IMS_PASS, 'ERROR: No environment variable for password provided for IMS Test.').toBeTruthy();
+
+  await expect(page).toHaveTitle(/Adobe ID/);
+  let heading = await page.locator('.spectrum-Heading1').first().innerText();
+  expect(heading).toBe('Sign in');
+
+  // Fill out Sign-in Form
+  await expect(async () => {
+    await page.locator('#EmailPage-EmailField').fill(process.env.IMS_EMAIL);
+    await page.locator('[data-id=EmailPage-ContinueButton]').click();
+    await expect(page.locator('text=Reset your password')).toBeVisible({ timeout: 45000 }); // Timeout accounting for how long IMS Login page takes to switch form
+  }).toPass({
+    intervals: [1_000],
+    timeout: 10_000,
+  });
+
+  heading = await page.locator('.spectrum-Heading1', { hasText: 'Enter your password' }).first().innerText();
+  expect(heading).toBe('Enter your password');
+  await page.locator('#PasswordPage-PasswordField').fill(process.env.IMS_PASS);
+  await page.locator('[data-id=PasswordPage-ContinueButton]').click();
+  await page.locator('div.ActionList-Item:nth-child(1)').click();
+  await page.waitForURL(`${props.url}#`);
+  await expect(page).toHaveURL(`${props.url}#`);
+}
+
+export default { fillOutSignInForm };

nala/libs/screenshot/take.js

@@ -0,0 +1,25 @@
+/**
+  * Take a screenshot of a page
+  * @param {Page} page - The page object
+  * @param {string} folderPath - The folder path to save the screenshot, e.g., screenshots/milo
+  * @param {string} fileName - The file name of the screenshot
+  * @param {object} options - The screenshot options, see https://playwright.dev/docs/api/class-page#page-screenshot
+  * @returns {object} The screenshot result
+*/
+async function take(page, folderPath, fileName, options = {}) {
+  const urls = [];
+  const result = {};
+  const name = `${folderPath}/${fileName}.png`;
+  urls.push(page.url());
+  options.path = name;
+  if (options.selector) {
+    await page.locator(options.selector).screenshot(options);
+  } else {
+    await page.screenshot(options);
+  }
+  result.a = name;
+  result.urls = urls.join(' | ');
+  return result;
+}
+
+export default { take };