Before starting, please note our corporate security compliance:

• NDA Compliance: Playwright runs 100% locally on your machine. It does not upload screenshots, videos, or network data to external cloud servers.
• VPN Requirement: You must remain connected to the company VPN since the target platform resides within an internal network environment.
• Data Best Practices: During text recording, never input real customer names, production credentials, or real credit card numbers. Use fictitious test data.

1. Node.js: Download and install the LTS version from nodejs.org. (Accept all default setup selections).
2. Visual Studio Code (VS Code): Download and install the editor from ://visualstudio.com.

Follow these steps to create your working directory and install the Playwright automation framework:

1. Open your computer's Command Prompt (ensure you use Command Prompt and NOT PowerShell to avoid Windows security blocks).
2. Create a new directory and navigate inside it by running:

   mkdir mi-proyecto-automation
   cd mi-proyecto-automation

3. Initialize the official Playwright package:

   npm init playwright@latest

4. Respond by pressing the Enter key for every question to accept the recommended default parameters (This configures TypeScript and automatically downloads the browser binaries).
5. Launch VS Code, go to the top menu, select File > Open Folder, and open your mi-proyecto-automation folder.
6. Go to the Extensions icon (four square blocks on the left sidebar), search for Playwright Test (developed by Microsoft), and click Install.

To record and run tests without typing your password or completing the mobile MFA every single time, we must generate a local file named auth.json to store your secure session tokens:

1. Open a new terminal in VS Code (Terminal > New Terminal) and ensure it is set to Command Prompt.
2. Run this exact command to launch a browser that ignores security certificates and tracks your login details:

   npx playwright codegen --ignore-https-errors --save-storage=auth.json "https://10.24.80"

3. Log in manually with your corporate email, password, and approve the MFA on your phone.
4. Once you reach the main dashboard, wait 10 seconds and click on any menu to ensure the cookies bind to the IP address.
5. The Birth of auth.json: Now, close the browser window. The recording process will end, and a brand-new file named auth.json will automatically appear inside your project folder root. This file contains your encrypted temporary session keys.

To enable smooth recording and execution, we must declare our persistent parameters in two internal files:

1. Open playwright.config.ts, locate the use: { block, and add these lines:

     use: {
       ignoreHTTPSErrors: true,
       storageState: 'auth.json',
       baseURL: 'https://10.24.80',
       trace: 'on-first-retry',
     },

2. Open package.json, locate the "scripts": { block, and add our recording shortcut command:

     "scripts": {
       "grabar": "npx playwright codegen --ignore-https-errors --load-storage=auth.json \"https://10.24.80\""
     },

3. Save all changes (Ctrl + S) and restart Visual Studio Code.

Corporate firewalls block blank screen initializations from graphical extensions. Always use our tailored command line shortcut to record already logged-in sessions instantly. Since it runs in recording mode, you will need to manually save the code generated at the end:

1. Open your terminal in VS Code (Command Prompt) and execute:

   npm run grabar

2. The browser will open already logged into the dashboard, bypassing the MFA login completely.
3. Perform your test scenario actions normally (e.g., clicking on school students, opening profiles).
4. When finished, do not just close the browser. Look at the gray window called Playwright Inspector.
5. In the top right corner of the gray window, click the Copy (clipboard) button. This saves your newly recorded test code. Now you can safely close the browser.
6. Creating the New File: Go to VS Code, right-click the tests folder on the left sidebar, and select New File.
7. Name your file using lowercase and hyphens, ending strictly with .spec.ts (e.g., student-verification.spec.ts).
8. Open the new blank file, paste the copied code using Ctrl + V, and save it using Ctrl + S.

Once your script file is saved inside the tests folder, you can trigger Playwright to visually replicate the sequence at any time without terminal commands:

1. Click the Testing icon (laboratory flask) on the left sidebar of VS Code.
2. Watch the execution visually: Ensure the Show browser checkbox is enabled in the lower-left Tools panel.
3. Find your test file in the list and click the green Play (▶) button located next to its name.
4. Playwright will launch the browser, automatically inject the auth.json cookies, and replicate your entire workflow autonomously in seconds, marking it with a green checkmark (✓) upon success.