Add files via upload

Author: codewithmmak

README.md

@@ -1,2 +1,52 @@
-# playwright-lambdatest-javascript
-This is Test Automation framework designed using Playwright, and JavaScript to execute on LambdaTest
+---
+# Playwright and LambdaTest Setup Guide
+---
+
+## Features of this framework
+* Playwright Expect (Assertions)
+* [Reporting: Allure](https://www.npmjs.com/package/allure-playwright)
+* [Cloud Integration: LambdaTest](https://www.lambdatest.com/)
+
+## Getting started
+
+### Pre-requisites
+* Download and install Node.js
+* Download and install any Text Editor like Visual Code/Sublime/Brackets
+
+### Setup Visual Code
+* Install GitLens Extension from the Marketplace: `GitLens — Git supercharged by GitKraken https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens`
+* Go to Visual Code Preference > Setting and search `formatOnSave` and enable/ON it.
+
+### Setup Scripts 
+* Clone the repository into a folder
+* Go to Project root directory and install Dependency: `npm install`
+* All the dependencies from package.json would be installed in node_modules folder.
+
+## How to Run Test Locally
+* Go to the Project root directory and run command: `npm test`
+
+### How to view default Playwright HTML report
+* Go to the Project root directory: `./playwright-report/index.html`
+
+### Playwright Default HTML Test Report
+![Playwright Default HTML Test Report](./assets/html-test-report.PNG?raw=true "Playwright Default HTML Test Report")
+
+### How to view Allure HTML report
+* Go to the Project root directory and run command: `npm run allure-report`
+* Go to the Project root directory: `./allure-report/index.html`
+
+### Allure Test Report
+![Allure Test Report](./assets/allure-test-report.PNG?raw=true "Allure Test Report")
+
+![Allure Test Report Expanded View](./assets/allure-test-report-expanded-view.PNG?raw=true "Allure Test Report Expanded View")
+
+## How to Run Test on LambdaTest Cloud
+* Go to Project root directory and run command: `npm run lambdatest`
+
+### Terminal Test Result
+![Terminal Test Result](./assets/terminal-lt.PNG?raw=true "Terminal Test Result")
+
+### LambdaTest Cloud Results
+![LambdaTest Cloud Results](./assets/lambdatest-results.PNG?raw=true "LambdaTest Cloud Results")
+
+![LambdaTest Cloud Results Expanded View](./assets/lambdatest-results-expanded-view.PNG?raw=true "LambdaTest Cloud Results Expanded View")

assets/allure-test-report-expanded-view.PNG

@@ -0,0 +1,70 @@
+/**
+ * Add the file in your test suite to run tests on LambdaTest.
+ * Import `test` object from this file in the tests.
+ */
+const base = require('@playwright/test')
+const path = require('path')
+const { chromium } = require('playwright')
+const cp = require('child_process');
+const playwrightClientVersion = cp.execSync('npx playwright --version').toString().trim().split(' ')[1];
+
+// LambdaTest capabilities
+const capabilities = {
+    'LT:Options': {
+        'build': `Playwright Build - ${new Date().toJSON()}`,
+        'name': 'Playwright Test',
+        'user': process.env.LT_USERNAME,
+        'accessKey': process.env.LT_ACCESS_KEY,
+        'network': true,
+        'video': true,
+        'console': true,
+        'tunnel': false, // Add tunnel configuration if testing locally hosted webpage
+        'tunnelName': '', // Optional
+        'geoLocation': '', // country code can be fetched from https://www.lambdatest.com/capabilities-generator/
+        'playwrightClientVersion': playwrightClientVersion
+    }
+}
+
+// Patching the capabilities dynamically according to the project name.
+const modifyCapabilities = (configName, testName) => {
+    let config = configName.split('@lambdatest')[0]
+    let [browserName, browserVersion, platform] = config.split(':')
+    capabilities.browserName = browserName ? browserName : capabilities.browserName
+    capabilities.browserVersion = browserVersion ? browserVersion : capabilities.browserVersion
+    capabilities['LT:Options']['platform'] = platform ? platform : capabilities['LT:Options']['platform']
+    capabilities['LT:Options']['name'] = testName
+}
+
+const getErrorMessage = (obj, keys) => keys.reduce((obj, key) => (typeof obj == 'object' ? obj[key] : undefined), obj)
+
+exports.test = base.test.extend({
+    page: async ({ page, playwright }, use, testInfo) => {
+        // Configure LambdaTest platform for cross-browser testing
+        let fileName = testInfo.file.split(path.sep).pop()
+        if (testInfo.project.name.match(/lambdatest/)) {
+            modifyCapabilities(testInfo.project.name, `${testInfo.title} - ${fileName}`)
+
+            const browser = await chromium.connect({
+                wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
+            })
+
+            const ltPage = await browser.newPage(testInfo.project.use)
+            await use(ltPage)
+
+            const testStatus = {
+                action: 'setTestStatus',
+                arguments: {
+                    status: testInfo.status,
+                    remark: getErrorMessage(testInfo, ['error', 'message'])
+                }
+            }
+            await ltPage.evaluate(() => { },
+                `lambdatest_action: ${JSON.stringify(testStatus)}`)
+            await ltPage.close()
+            await browser.close()
+        } else {
+            // Run tests in local in case of local config provided
+            await use(page)
+        }
+    }
+})

assets/allure-test-report.PNG

@@ -0,0 +1,85 @@
+// @ts-check
+const { devices } = require('@playwright/test');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ * @type {import('@playwright/test').PlaywrightTestConfig}
+ */
+const config = {
+  testDir: './tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+
+    // LambdaTest Cloud
+    {
+      name: 'chrome:latest:MacOS Catalina@lambdatest',
+      use: {
+        viewport: { width: 1920, height: 1080 }
+      }
+    },
+    {
+      name: 'chrome:latest:Windows 10@lambdatest',
+      use: {
+        viewport: { width: 1280, height: 720 }
+      }
+    },
+    {
+      name: 'MicrosoftEdge:latest:Windows 10@lambdatest',
+      use: {
+        ...devices['iPhone 12 Pro Max']
+      }
+    },
+    {
+      name: 'pw-firefox:latest:Windows 10@lambdatest',
+      use: {
+        viewport: { width: 1280, height: 720 }
+      }
+    },
+    {
+      name: 'pw-webkit:latest:Windows 10@lambdatest',
+      use: {
+        viewport: { width: 1920, height: 1080 }
+      }
+    }
+  ],
+
+};
+
+module.exports = config;