IDE y Extensiones para Testers: Guía Completa de Herramientas para Ingenieros QA

Las pruebas de software modernas requieren más que clics manuales y pruebas exploratorias. Los ingenieros QA de hoy necesitan entornos de desarrollo potentes, extensiones especializadas y herramientas de depuración para escribir pruebas automatizadas, analizar tráfico de red e investigar errores de manera eficiente. Esta guía completa cubre los IDEs, extensiones y herramientas esenciales que todo tester debe dominar.

Tabla de Contenidos

VS Code para Ingenieros QA

Visual Studio Code se ha convertido en el editor preferido para muchos testers debido a su naturaleza liviana, extenso mercado de extensiones y excelente soporte para múltiples lenguajes de programación. Exploremos cómo transformar VS Code en un potente entorno de testing.

Extensiones Esenciales para Testers

1. Extensiones de Test Runner

Jest Runner

Integración directa con el framework de testing Jest
Ejecuta tests individuales o suites con un clic
Muestra resultados de tests inline en el editor
Depura tests directamente desde el editor

Instalación:

code --install-extension Orta.vscode-jest

Configuración en .vscode/settings.json:

{
  "jest.autoRun": "off",
  "jest (como se discute en [From Manual to Automation: Complete Transition Guide for QA Engineers](/blog/manual-to-automation-transition)).showCoverageOnLoad": true,
  "jest (como se discute en [Allure Framework: Creating Beautiful Test Reports](/blog/allure-framework-reporting)).coverageFormatter": "DefaultFormatter",
  "jest.debugMode": true
}

Test Explorer UI

Explorador de tests unificado para múltiples frameworks
Soporta Jest, Mocha, Pytest, JUnit y más
Vista de árbol de todos los tests con indicadores de pass/fail
Navegación rápida a definiciones de tests

code --install-extension hbenl.vscode-test-explorer

Playwright Test for VSCode

Ejecuta tests de Playwright directamente desde VS Code
Selecciona locators con herramienta visual
Graba tests con integración de codegen
Depura con breakpoints

code --install-extension ms-playwright.playwright

Ejemplo de configuración:

{
  "playwright.reuseBrowser": true,
  "playwright (como se discute en [Cloud Testing Platforms: Complete Guide to BrowserStack, Sauce Labs, AWS Device Farm & More](/blog/cloud-testing-platforms)).showTrace": true,
  "playwright.env": {
    "HEADLESS": "false"
  }
}

2. Calidad de Código y Linting

ESLint Esencial para la calidad del código de tests JavaScript/TypeScript:

code --install-extension dbaeumer.vscode-eslint

.eslintrc.js para archivos de test:

module.exports = {
  env: {
    node: true,
    jest: true,
    mocha: true
  },
  extends: [
    'eslint:recommended',
    'plugin:jest/recommended'
  ],
  rules: {
    'jest/no-disabled-tests': 'warn',
    'jest/no-focused-tests': 'error',
    'jest/valid-expect': 'error'
  }
}

Prettier Formateo consistente de código para automatización de tests:

code --install-extension esbenp.prettier-vscode

Configuración:

{
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.tabWidth": 2
}

3. Extensiones para Testing de API

REST Client Prueba endpoints de API sin salir de VS Code:

code --install-extension humao.rest-client

Crea archivos .http para testing de API:

### Obtener Usuario por ID
GET https://api.example.com/users/123
Authorization: Bearer {{token}}

### Crear Nuevo Usuario
POST https://api.example.com/users
Content-Type: application/json

{
  "name": "Juan Pérez",
  "email": "juan@example.com"
}

### Variables
@baseUrl = https://api.example.com
@token = eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

### Usando Variables
GET {{baseUrl}}/profile
Authorization: Bearer {{token}}

Thunder Client Alternativa ligera a Postman:

code --install-extension rangav.vscode-thunder-client

Características:

Colecciones y entornos
Interfaz gráfica para testing de API
Genera snippets de código en múltiples lenguajes
Importa/exporta colecciones de Postman

4. Depuración e Inspección

JavaScript Debugger Integrado en VS Code, pero requiere configuración:

Crea .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Jest Archivo Actual",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": [
        "${fileBasename}",
        "--runInBand",
        "--no-cache"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Depurar Test Playwright",
      "program": "${workspaceFolder}/node_modules/.bin/playwright",
      "args": [
        "test",
        "${file}",
        "--debug"
      ],
      "console": "integratedTerminal"
    }
  ]
}

CodeLLDB (para testing en Python):

code --install-extension vadimcn.vscode-lldb

Configuración de depuración Python:

{
  "type": "python",
  "request": "launch",
  "name": "Pytest Archivo Actual",
  "module": "pytest",
  "args": [
    "${file}",
    "-v",
    "-s"
  ],
  "console": "integratedTerminal"
}

5. Control de Versiones y Colaboración

GitLens Capacidades Git mejoradas para rastrear cambios en tests:

code --install-extension eamodio.gitlens

Características clave para testers:

Anotaciones de blame mostrando quién escribió cada test
Historial de archivos para rastrear evolución de tests
Comparar versiones de tests entre branches
Historial de líneas para entender modificaciones de tests

Live Share Pair testing y depuración colaborativa:

code --install-extension MS-vsliveshare.vsliveshare

Casos de uso:

Pair programming en automatización de tests
Sesiones de depuración remota
Revisión colaborativa de tests
Sesiones de compartir conocimiento

Snippets Personalizados para Automatización de Tests

Crea snippets personalizados en Código > Preferencias > Snippets de Usuario:

Snippets de Tests Jest (javascript.json):

{
  "Bloque Describe de Jest": {
    "prefix": "desc",
    "body": [
      "describe('${1:nombre suite}', () => {",
      "  ${2:// código test}",
      "});"
    ]
  },
  "Caso de Test Jest": {
    "prefix": "test",
    "body": [
      "test('${1:nombre test}', async () => {",
      "  ${2:// implementación test}",
      "});"
    ]
  },
  "Jest Before Each": {
    "prefix": "beforeach",
    "body": [
      "beforeEach(async () => {",
      "  ${1:// código setup}",
      "});"
    ]
  },
  "Plantilla Test API": {
    "prefix": "apitest",
    "body": [
      "test('${1:endpoint} debería ${2:comportamiento esperado}', async () => {",
      "  const response = await request(app)",
      "    .${3:get}('${4:/api/endpoint}')",
      "    .set('Authorization', `Bearer \\${token}`);",
      "",
      "  expect(response.status).toBe(${5:200});",
      "  expect(response.body).toMatchObject({",
      "    ${6:// propiedades esperadas}",
      "  });",
      "});"
    ]
  }
}

Snippets de Playwright:

{
  "Test Playwright": {
    "prefix": "pwtest",
    "body": [
      "test('${1:descripción test}', async ({ page }) => {",
      "  await page.goto('${2:https://example.com}');",
      "  ${3:// pasos del test}",
      "});"
    ]
  },
  "Playwright Expect": {
    "prefix": "pwexpect",
    "body": [
      "await expect(page.locator('${1:selector}')).${2:toBeVisible}();"
    ]
  }
}

Configuración del Workspace para Proyectos de Testing

Crea .vscode/settings.json para tu proyecto de tests:

{
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/coverage": true,
    "**/playwright-report": true
  },
  "search.exclude": {
    "**/node_modules": true,
    "**/coverage": true,
    "**/dist": true
  },
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "files.associations": {
    "*.spec.js": "javascript",
    "*.test.js": "javascript",
    "*.http": "http"
  },
  "jest.autoRun": {
    "watch": false,
    "onSave": "test-file"
  },
  "testing.automaticallyOpenPeekView": "failureInVisibleDocument",
  "terminal.integrated.defaultProfile.osx": "zsh",
  "npm.enableScriptExplorer": true
}

Tareas para Operaciones Comunes de Testing

Crea .vscode/tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Ejecutar Todos los Tests",
      "type": "npm",
      "script": "test",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Ejecutar Tests con Cobertura",
      "type": "npm",
      "script": "test:coverage",
      "problemMatcher": [],
      "presentation": {
        "reveal": "always"
      }
    },
    {
      "label": "Lint Archivos de Test",
      "type": "npm",
      "script": "lint",
      "problemMatcher": ["$eslint-stylish"]
    },
    {
      "label": "Generar Reporte Playwright",
      "type": "shell",
      "command": "npx playwright show-report",
      "problemMatcher": []
    }
  ]
}

Atajos de Teclado para Productividad

Personaliza atajos de teclado en Keybindings (JSON):

[
  {
    "key": "ctrl+shift+t",
    "command": "testing.runCurrentFile"
  },
  {
    "key": "ctrl+shift+d",
    "command": "testing.debugCurrentFile"
  },
  {
    "key": "ctrl+shift+a",
    "command": "testing.runAll"
  },
  {
    "key": "ctrl+shift+f",
    "command": "testing.reRunFailTests"
  }
]

Workspaces Multi-Root para Proyectos Complejos

Para proyectos con tests separados de frontend y backend:

Crea test-automation.code-workspace:

{
  "folders": [
    {
      "name": "Tests API",
      "path": "./api-tests"
    },
    {
      "name": "Tests E2E",
      "path": "./e2e-tests"
    },
    {
      "name": "Tests Rendimiento",
      "path": "./performance-tests"
    }
  ],
  "settings": {
    "files.watcherExclude": {
      "**/node_modules/**": true
    }
  }
}

IntelliJ IDEA para Testing

IntelliJ IDEA (y otros IDEs de JetBrains) proporcionan características potentes para automatización de tests basadas en Java, incluyendo excelente soporte para JUnit, TestNG, Selenium y otros frameworks de testing.

Plugins Esenciales para Testing

1. Plugins de Automatización de Tests

Soporte JUnit 5 (Integrado)

Ejecuta tests desde iconos en el editor
Navega entre tests y código de producción
Genera métodos de test automáticamente
Análisis de cobertura

Configuración en Run Configuration:

Opciones VM: -ea -Dfile.encoding=UTF-8
Directorio de trabajo: $MODULE_WORKING_DIR$
Variables de entorno: ENV=test

Plugin TestNG Soporte avanzado para framework de testing:

<!-- Dependencia pom.xml -->
<dependency>
    <groupId>org.testng</groupId>
    <artifactId>testng</artifactId>
    <version>7.8.0</version>
    <scope>test</scope>
</dependency>

Configuración TestNG (testng.xml):

<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Suite de Tests" parallel="methods" thread-count="5">
    <test name="Tests API">
        <classes>
            <class name="com.example.tests.UserApiTest"/>
            <class name="com.example.tests.ProductApiTest"/>
        </classes>
    </test>
    <test name="Tests UI">
        <packages>
            <package name="com.example.tests.ui"/>
        </packages>
    </test>
</suite>

Cucumber for Java Soporte para testing BDD:

Settings > Plugins > Install "Cucumber for Java"

Características:

Resaltado de sintaxis Gherkin
Navegación desde steps a definiciones de steps
Genera definiciones de steps desde archivos feature
Ejecuta escenarios desde el editor

Archivo feature de ejemplo:

Feature: Autenticación de Usuario

  Background:
    Given la aplicación está corriendo
    And la base de datos está limpia

  @smoke @api
  Scenario: Login exitoso con credenciales válidas
    Given existe un usuario con username "testuser"
    When el usuario inicia sesión con username "testuser" y password "Test123!"
    Then el login debería ser exitoso
    And se debería retornar un token JWT válido

  @negative
  Scenario Outline: Intentos de login fallidos
    When el usuario inicia sesión con username "<username>" y password "<password>"
    Then el login debería fallar
    And el mensaje de error debería ser "<error>"

    Examples:
      | username  | password  | error                     |
      | invalid   | Test123!  | Credenciales inválidas    |
      | testuser  | wrong     | Credenciales inválidas    |
      |           | Test123!  | Username requerido        |

2. Herramientas de Cobertura de Código

Cobertura de Código de IntelliJ IDEA (Integrado) Ejecuta tests con cobertura:

Clic derecho en clase/paquete de test
Selecciona “Run with Coverage”
Ver cobertura en gutter del editor y ventana Coverage

Configuración en .idea/workspace.xml:

<component name="CoverageOptionsProvider">
  <option name="myAddOrReplace" value="2" />
  <option name="myGlobalRunner" value="IDEA" />
  <option name="myTraceTestFramework" value="false" />
</component>

Plugin JaCoCo Reportes de cobertura más avanzados:

<!-- Plugin Maven -->
<plugin>
    <groupId>org.jacoco</groupId>
    <artifactId>jacoco-maven-plugin</artifactId>
    <version>0.8.11</version>
    <executions>
        <execution>
            <goals>
                <goal>prepare-agent</goal>
            </goals>
        </execution>
        <execution>
            <id>report</id>
            <phase>test</phase>
            <goals>
                <goal>report</goal>
            </goals>
        </execution>
        <execution>
            <id>jacoco-check</id>
            <goals>
                <goal>check</goal>
            </goals>
            <configuration>
                <rules>
                    <rule>
                        <element>PACKAGE</element>
                        <limits>
                            <limit>
                                <counter>LINE</counter>
                                <value>COVEREDRATIO</value>
                                <minimum>0.80</minimum>
                            </limit>
                        </limits>
                    </rule>
                </rules>
            </configuration>
        </execution>
    </executions>
</plugin>

3. Testing de API REST

HTTP Client (Integrado) Crea archivos .http para testing de API:

### Entorno de desarrollo
@host = http://localhost:8080
@token = {{auth_token}}

### Obtener Token de Autenticación
# @name auth
POST {{host}}/api/auth/login
Content-Type: application/json

{
  "username": "admin",
  "password": "admin123"
}

> {% client.global.set("auth_token", response.body.token); %}

### Obtener Todos los Usuarios (Autenticado)
GET {{host}}/api/users
Authorization: Bearer {{token}}

### Crear Nuevo Usuario
POST {{host}}/api/users
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "username": "nuevousuario",
  "email": "nuevousuario@example.com",
  "role": "USER"
}

### Actualizar Usuario
# @name updateUser
PUT {{host}}/api/users/{{userId}}
Content-Type: application/json
Authorization: Bearer {{token}}

{
  "email": "actualizado@example.com"
}

### Manejador de respuesta
> {%
    client.test("Request ejecutado exitosamente", function() {
        client.assert(response.status === 200, "Estado de respuesta no es 200");
    });

    client.test("Usuario actualizado correctamente", function() {
        client.assert(response.body.email === "actualizado@example.com");
    });
%}

### Eliminar Usuario
DELETE {{host}}/api/users/{{userId}}
Authorization: Bearer {{token}}

4. Integración con Herramientas de Base de Datos

Database Tools and SQL (Integrado) Conecta a bases de datos de test para verificación de datos:

Abre ventana de herramienta Database
Añade data source (PostgreSQL, MySQL, etc.)
Crea consola SQL para gestión de datos de test

Script de ejemplo para setup de datos de test:

-- Setup datos de test
TRUNCATE TABLE users CASCADE;
TRUNCATE TABLE orders CASCADE;

INSERT INTO users (id, username, email, role, created_at)
VALUES
    (1, 'testuser1', 'test1@example.com', 'USER', NOW()),
    (2, 'testuser2', 'test2@example.com', 'USER', NOW()),
    (3, 'admin', 'admin@example.com', 'ADMIN', NOW());

INSERT INTO orders (id, user_id, product_id, quantity, total, status)
VALUES
    (1, 1, 101, 2, 199.98, 'COMPLETED'),
    (2, 1, 102, 1, 49.99, 'PENDING'),
    (3, 2, 101, 1, 99.99, 'COMPLETED');

-- Verificar datos
SELECT u.username, COUNT(o.id) as order_count, SUM(o.total) as total_spent
FROM users u
LEFT JOIN orders o ON u.id = o.user_id
GROUP BY u.id, u.username;

Live Templates para Código de Test

Crea live templates personalizados en Settings > Editor > Live Templates:

Método de Test JUnit 5:

@Test
@DisplayName("$DESCRIPTION$")
void $METHOD_NAME$() {
    // Arrange (Preparar)
    $ARRANGE$
    
    // Act (Actuar)
    $ACT$
    
    // Assert (Verificar)
    $ASSERT$
}

Test de API REST Assured:

@Test
void test$METHOD$Returns$STATUS$() {
    given()
        .contentType(ContentType.JSON)
        .header("Authorization", "Bearer " + token)
        .when()
        .$HTTP_METHOD$("$ENDPOINT$")
        .then()
        .statusCode($STATUS_CODE$)
        .body("$JSON_PATH$", equalTo($EXPECTED_VALUE$));
}

Método de Page Object Selenium:

public $RETURN_TYPE$ $METHOD_NAME$($PARAMETERS$) {
    wait.until(ExpectedConditions.elementToBeClickable($ELEMENT$));
    $ELEMENT$.$ACTION$();
    return $RETURN_VALUE$;
}

Data Provider de TestNG:

@DataProvider(name = "$PROVIDER_NAME$")
public Object[][] $METHOD_NAME$() {
    return new Object[][] {
        $DATA$
    };
}

Configuraciones de Ejecución para Tests

Plantilla de Configuración JUnit:

Nombre: Todos los Tests Unitarios
Tipo de test: All in package
Paquete: com.example.tests.unit
Opciones VM: -ea -Xmx512m
Directorio trabajo: $MODULE_DIR$
Variables entorno: 
  ENV=test
  LOG_LEVEL=DEBUG
Antes de launch: Build, Run Maven Goal (clean compile)

Configuración Suite TestNG:

Nombre: Tests de Integración
Suite: src/test/resources/testng-integration.xml
Opciones VM: -Denv=staging -Dbrowser=chrome
Listeners: com.example.listeners.TestListener
Antes de launch: Build, Run Maven Goal (clean test-compile)

Depuración de Fallos en Tests

Breakpoints Condicionales: Clic derecho en breakpoint y añadir condición:

username.equals("problematicUser") && response.getStatus() != 200

Evaluar Expresión: Durante depuración, usa Alt+F8 para evaluar:

// Verificar contenido de respuesta JSON
new ObjectMapper().readTree(response.getBody().asString())

// Verificar estado de elemento
driver.findElement(By.id("submitBtn")).isEnabled()

// Verificación de query de base de datos
jdbcTemplate.queryForObject("SELECT COUNT(*) FROM users WHERE status = 'ACTIVE'", Integer.class)

Breakpoints de Excepción: Configura breakpoints para excepciones específicas:

Ve a Run > View Breakpoints
Añade Java Exception Breakpoints
Ingresa clase de excepción (ej: AssertionError, TimeoutException)

Análisis e Inspección de Código

Habilita inspecciones útiles para código de test:

Settings > Editor > Inspections > Enable:
- JUnit > Test method naming convention
- JUnit > Test method without assertions
- TestNG > Dependent methods
- Java > Probable bugs > Constant conditions
- Java > Testing > Assertion arguments order

Perfil de inspección personalizado para tests:

<!-- .idea/inspectionProfiles/Tests.xml -->
<profile version="1.0">
  <option name="myName" value="Tests" />
  <inspection_tool class="JUnitTestMethodWithNoAssertions" enabled="true" level="WARNING" />
  <inspection_tool class="TestMethodWithoutAssertion" enabled="true" level="WARNING" />
</profile>

Dominio de Browser DevTools

Las Herramientas de Desarrollador del navegador son esenciales para todo tester, ya sea depurando problemas de UI, analizando rendimiento de red o investigando errores de JavaScript. Los navegadores modernos (Chrome, Firefox, Safari, Edge) ofrecen potentes herramientas integradas.

Chrome DevTools para Testing

1. Panel Elements

Inspección del DOM para Automatización de Tests:

Clic derecho en elemento → Inspeccionar
Encuentra selectores únicos para automatización
Copiar XPath: Clic derecho en elemento → Copy → Copy XPath
Copiar JS Path: Clic derecho en elemento → Copy → Copy JS path

Mejores Prácticas para Generación de Selectores:

// En lugar de XPath frágil:
// /html/body/div[1]/div[2]/form/div[3]/button

// Usa selectores más estables:
document.querySelector('[data-testid="submit-button"]')
document.querySelector('button[type="submit"].primary')

// O XPath relativo:
//button[contains(text(), 'Enviar')]
//button[@data-testid='submit-button']

Edición en Vivo para Testing:

Doble clic en atributos para modificar
Editar como HTML para cambios complejos
Probar cambios CSS en panel Styles
Forzar estados de elemento: :hover, :active, :focus

2. Panel Console

Comandos Esenciales de Console para Testers:

// Query de elementos (similar a automatización de tests)
$('button.submit')           // Retorna primera coincidencia (como querySelector)
$$('button')                 // Retorna todas las coincidencias (como querySelectorAll)
$x('//button[@type="submit"]') // Query XPath

// Inspeccionar elementos
inspect($('button.submit'))  // Abre panel Elements

// Monitorear eventos
monitorEvents($('form'), 'submit')  // Log de envío de formulario
unmonitorEvents($('form'))          // Detener monitoreo

// Monitoreo de red
monitor(nombreFuncion)        // Log cuando se llama función
unmonitor(nombreFuncion)

// Rendimiento
console.time('nombreOperacion')
// ... ejecución de código ...
console.timeEnd('nombreOperacion')  // Muestra tiempo de ejecución

// Display de tabla para análisis de datos
console.table(usuarios)         // Muestra array de objetos como tabla

// Aserciones de test
console.assert(valor > 0, 'Valor debe ser positivo')

// Obtener event listeners
getEventListeners($('button.submit'))

// Copiar datos al portapapeles
copy(JSON.stringify(datosUsuario))

Snippets para Scripts de Test Reutilizables:

Crea snippet en Sources > Snippets:

// Snippet: Verificar Todos los Errores de Validación
(function checkValidation() {
  const errors = $$('.error-message');
  console.table(errors.map(el => ({
    elemento: el.closest('[data-testid]')?.dataset.testid || 'desconocido',
    mensaje: el.textContent.trim(),
    visible: window.getComputedStyle(el).display !== 'none'
  })));
})();

// Snippet: Probar Datos de Formulario
(function getFormData() {
  const form = $('form');
  const formData = new FormData(form);
  const data = {};
  for (let [key, value] of formData.entries()) {
    data[key] = value;
  }
  console.log('Datos Formulario:', data);
  copy(JSON.stringify(data, null, 2));
  console.log('¡Copiado al portapapeles!');
})();

// Snippet: Encontrar Test IDs Huérfanos
(function findOrphanedTestIds() {
  const elements = $$('[data-testid]');
  const testIds = elements.map(el => ({
    id: el.dataset.testid,
    tag: el.tagName,
    texto: el.textContent.trim().substring(0, 50)
  }));
  
  console.table(testIds);
  console.log(`Total: ${testIds.length} elementos con test IDs`);
})();

3. Panel Network

Análisis de Requests API para Testing:

Filtrado de Requests:

Filtrar por tipo: XHR, Fetch, JS, CSS, Img
Filtrar por dominio: domain:api.example.com
Filtrar por estado: status-code:404
Filtrar por método: method:POST
Combinar: method:POST domain:api status-code:200

Análisis de Request:

Headers: Verificar tokens de autorización, tipos de contenido
Payload: Verificar formato del body de request
Preview: Ver estructura de datos de respuesta
Response: Datos de respuesta raw
Timing: Analizar duración de request

Copiar Request como Código: Clic derecho en request → Copy → Copy as cURL / Copy as fetch / Copy as PowerShell

# Ejemplo cURL para automatización de tests
curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGc...' \
  -H 'Content-Type: application/json' \
  --data-raw '{"username":"testuser"}' \
  --compressed

Exportar Archivo HAR para Reportes de Bugs:

Clic derecho en panel Network
Guardar todo como HAR
Adjuntar a reporte de bug para trace completo de red

Throttling para Testing de Rendimiento:

Panel Network > Dropdown Throttling:
- Fast 3G (1.6 Mbps)
- Slow 3G (400 Kbps)
- Offline
- Perfiles personalizados

4. Panel Sources para Depuración

Depuración JavaScript para Testers:

Tipos de Breakpoint:

Line Breakpoints: Clic en número de línea
Conditional Breakpoints: Clic derecho en línea → Add conditional breakpoint
```
userId === 123 && response.status !== 200
```
DOM Breakpoints: Clic derecho en elemento en panel Elements
- Break on subtree modifications
- Break on attribute modifications
- Break on node removal
Event Listener Breakpoints: Sources > Event Listener Breakpoints
- Mouse > click
- Keyboard > keydown
- Form > submit
- XHR > XMLHttpRequest sent
XHR/Fetch Breakpoints: Sources > XHR/fetch Breakpoints
- Añadir patrón URL: api/users

Local Overrides para Testing:

1. Sources > Overrides > Enable Local Overrides
2. Seleccionar carpeta para overrides
3. Editar respuesta en panel Sources
4. Guardar (Ctrl+S)
5. Recargar página para probar respuesta modificada

Casos de uso:

Probar manejo de errores sin cambios en backend
Modificar respuestas API para casos edge
Probar diferentes escenarios de datos
Simular respuestas lentas/fallidas

Blackboxing de Scripts de Terceros:

Settings > Blackboxing > Add pattern
Patrón: node_modules/

Mejora depuración saltando código de librerías.

5. Panel Performance

Grabación de Rendimiento para Análisis de Tests:

1. Clic en Record
2. Realizar acciones
3. Detener grabación
4. Analizar:
   - FPS: Frames por segundo (suave = 60 FPS)
   - CPU: Tiempo de ejecución JavaScript
   - Network: Cascada de requests
   - Screenshots: Timeline visual

Métricas Clave para Testers:

FCP (First Contentful Paint): Cuando aparece primer contenido
LCP (Largest Contentful Paint): Cuando se carga contenido principal
TTI (Time to Interactive): Cuando página se vuelve interactiva
TBT (Total Blocking Time): Tiempo que main thread está bloqueado
CLS (Cumulative Layout Shift): Estabilidad visual

Script de Testing de Rendimiento:

// Registrar métricas de rendimiento
const perfData = performance.getEntriesByType('navigation')[0];
console.table({
  'DNS Lookup': perfData.domainLookupEnd - perfData.domainLookupStart,
  'Conexión TCP': perfData.connectEnd - perfData.connectStart,
  'Tiempo Request': perfData.responseStart - perfData.requestStart,
  'Tiempo Response': perfData.responseEnd - perfData.responseStart,
  'Procesamiento DOM': perfData.domInteractive - perfData.responseEnd,
  'Tiempo Carga Total': perfData.loadEventEnd - perfData.navigationStart
});

// Obtener Web Vitals
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}: ${entry.value}`);
  }
});
observer.observe({ entryTypes: ['largest-contentful-paint', 'first-input', 'layout-shift'] });

6. Panel Application

Inspección de Storage para Testing:

Local Storage / Session Storage:

// Ver en Console
console.table(Object.entries(localStorage))

// Manipulación de datos de test
localStorage.setItem('authToken', 'test-token-123')
localStorage.removeItem('userId')
localStorage.clear()

// Test para automatización
expect(localStorage.getItem('theme')).toBe('dark')

Cookies:

Ver todas las cookies del dominio
Editar valores de cookies
Eliminar cookies individuales
Limpiar todas las cookies

IndexedDB:

Inspeccionar estructura de base de datos
Ver registros almacenados
Eliminar bases de datos para estado de test limpio

Cache Storage:

Inspeccionar cachés de Service Worker
Ver respuestas cacheadas
Eliminar caché para testing

7. Lighthouse para Testing de Calidad

Ejecuta auditorías automatizadas:

1. Abrir panel Lighthouse
2. Seleccionar categorías:
   - Performance
   - Accessibility
   - Best Practices
   - SEO
   - Progressive Web App
3. Elegir dispositivo (Móvil/Escritorio)
4. Clic "Generate report"

Lighthouse en Línea de Comandos:

npm install -g lighthouse

# Ejecutar auditoría
lighthouse https://example.com --output html --output-path ./report.html

# Con configuración personalizada
lighthouse https://example.com \
  --throttling.cpuSlowdownMultiplier=4 \
  --only-categories=performance,accessibility \
  --chrome-flags="--headless"

Firefox Developer Tools

Características Únicas para Testers:

Inspector CSS Grid/Flexbox:

Overlay visual para layouts Grid/Flexbox
Mejor que Chrome para depuración CSS

Accessibility Inspector:

Tools > Browser Tools > Accessibility
- Ver árbol de accesibilidad
- Verificar atributos ARIA
- Simular daltonismo
- Verificar ratios de contraste

Comando Screenshot:

Abrir Developer Tools > Settings (F1) > Available Toolbox Buttons > Enable "Take a screenshot"

O usar Console:
:screenshot --fullpage
:screenshot --selector ".main-content"

Bloqueo de Network Request:

Panel Network > Clic derecho en request > Block URL

Probar manejo de errores sin cambios en backend.

Herramientas Proxy: Charles y Fiddler

Las herramientas proxy interceptan tráfico HTTP/HTTPS entre cliente y servidor, permitiendo a los testers inspeccionar, modificar y simular respuestas API. Esencial para testing móvil, testing de API y testing de seguridad.

Charles Proxy

Charles es un proxy HTTP / monitor HTTP / Proxy Inverso multiplataforma que permite a desarrolladores y testers ver todo el tráfico HTTP/HTTPS.

Instalación y Configuración

# macOS
brew install --cask charles

# Windows: Descargar desde charlesproxy.com
# Licencia: ~$50 (prueba gratuita disponible)

Configuración Inicial:

Proxy > Proxy Settings
- Puerto: 8888 (por defecto)
- Enable transparent HTTP proxying: ✓
Proxy > macOS Proxy (para configurar proxy del sistema)

Instalación de Certificado SSL (para descifrado HTTPS):

macOS:

1. Help > SSL Proxying > Install Charles Root Certificate
2. Abrir Keychain Access
3. Encontrar certificado "Charles Proxy"
4. Doble clic > Trust > Always Trust

Windows:

1. Help > SSL Proxying > Install Charles Root Certificate
2. El certificado será añadido al Windows Certificate Store

Dispositivo Móvil (iOS/Android):

1. Conectar dispositivo a misma WiFi que computadora
2. Configuración WiFi del dispositivo > Configurar Proxy > Manual
   - Servidor: [IP Computadora]
   - Puerto: 8888
3. Abrir navegador en dispositivo: chls.pro/ssl
4. Instalar certificado
5. iOS: Settings > General > About > Certificate Trust Settings > Enable

Configuración SSL Proxying

Habilitar SSL proxying para hosts específicos:

Proxy > SSL Proxying Settings > Add

Location:
  Host: *.example.com
  Port: 443

O para todos los hosts:
  Host: *
  Port: 443

Grabación y Análisis de Tráfico

Vista Structure:

Vista jerárquica de hosts y paths
Expandir para ver todos los requests a endpoint específico
Clic derecho > Clear para remover ruido

Vista Sequence:

Lista cronológica de todos los requests
Mejor para entender flujo de requests
Muestra timing exacto de requests

Inspector de Request/Response:

Pestañas:

Overview: Método, estado, timing, tamaño
Headers: Headers de request/response
Text: Respuesta en texto plano
JSON: JSON formateado con vista de árbol
XML: XML formateado
Raw: Request/response raw completo

Filtrado de Tráfico

Focus en Host Específico:

Clic derecho en host > Focus
Ahora solo muestra tráfico para ese host

Recording Settings:

Proxy > Recording Settings > Include

Add:
  Protocol: HTTP+HTTPS
  Host: api.example.com
  Port: 443
  Path: /api/*

Filtrar por Tipo de Contenido:

View > Filter Settings

Show only:
☑ JSON
☑ XML
☐ HTML
☐ Images
☐ CSS/JavaScript

Manipulación de Requests

Breakpoints para Modificación de Request/Response:

1. Proxy > Breakpoint Settings > Enable Breakpoints
2. Añadir breakpoint:
   - Host: api.example.com
   - Path: /api/users
   - Request: ✓
   - Response: ✓

Cuando request/response alcanza breakpoint:

Pestaña Edit JSON Request: Modificar body de request
Pestaña Edit Response: Modificar respuesta
Clic Execute para continuar

Casos de Uso:

Probar manejo de errores cambiando códigos de estado
Modificar datos de respuesta para casos edge
Cambiar parámetros de request
Probar escenarios de timeout (añadir delay)

Map Local & Map Remote

Map Local (Reemplazar respuesta remota con archivo local):

Tools > Map Local Settings > Add

Map From:
  Protocol: HTTPS
  Host: api.example.com
  Path: /api/users
  
Map To:
  Local Path: /Users/test/mock-responses/users.json

Archivo de respuesta mock (users.json):

{
  "users": [
    {
      "id": 1,
      "name": "Usuario Test",
      "email": "test@example.com",
      "role": "admin"
    }
  ],
  "total": 1
}

Map Remote (Redirigir requests a servidor diferente):

Tools > Map Remote Settings > Add

Map From:
  Protocol: HTTPS
  Host: api-prod.example.com
  Path: /api/v2/users

Map To:
  Protocol: HTTPS
  Host: api-staging.example.com
  Path: /api/v2/users

Casos de uso:

Probar contra staging mientras se usa frontend de producción
Probar nueva versión de API
Probar comportamiento de load balancer

Herramienta Rewrite

Modificar Requests/Responses con Reglas:

Tools > Rewrite Settings > Add

Name: Añadir Headers CORS
Apply to: api.example.com

Add Rule:
  Type: Add Header
  Where: Response
  Name: Access-Control-Allow-Origin
  Value: *

Add Rule:
  Type: Modify Status
  Where: Response
  Status: 200
  (Cambiar 4xx/5xx a 200 para testing)

Add Rule:
  Type: Body Replacement
  Where: Response
  Match: "status":"active"
  Replace: "status":"inactive"

Throttling (Condicionamiento de Red)

Proxy > Throttle Settings > Enable Throttling

Preset: 3G (780 kbps down, 330 kbps up)
O Custom:
  Bandwidth: 512 kbps
  Utilisation: 80%
  Round-trip latency: 300ms
  MTU: 1500 bytes

Apply to: Only selected hosts
Add: api.example.com

Casos de Uso:

Probar comportamiento de app en redes lentas
Probar timeouts
Probar estados de carga
Probar mejora progresiva

Repetir Requests

Testing de Repetición:

Clic derecho en request > Repeat
Clic derecho en request > Repeat Advanced
  - Count: 10
  - Concurrency: 5
  - Delay: 1000ms

Usar para:

Load testing (básico)
Probar condiciones de carrera
Probar rate limiting
Reproducir problemas intermitentes

Exportación y Reportes

Exportar Sesión:

File > Export Session
Formatos:
  - Charles Session (.chls)
  - HAR (HTTP Archive)
  - CSV
  - JSON

Generar Reporte:

File > Export Report
  - HTML Report
  - Include request/response bodies
  - Include timing information

Adjuntar a reportes de bugs para contexto completo.

Fiddler Classic / Fiddler Everywhere

Fiddler es otro proxy de depuración web potente, popular en Windows. Fiddler Everywhere es la versión multiplataforma.

Instalación

# Windows (Fiddler Classic - Gratis)
winget install Fiddler.Fiddler

# Multiplataforma (Fiddler Everywhere - Suscripción)
# Descargar desde telerik.com/fiddler

Características Clave

Composers: Crear requests personalizados:

Composer > Parsed

Request:
  Method: POST
  URL: https://api.example.com/users
  Headers:
    Content-Type: application/json
    Authorization: Bearer {token}
  Body:
    {
      "username": "testuser",
      "email": "test@example.com"
    }

Execute > Ver respuesta

AutoResponder (Similar a Charles Map Local):

Rules > Add Rule

If request matches:
  EXACT: https://api.example.com/users
Then respond with:
  File: C:\mocks\users.json
  Or: *404
  Or: *delay:5000 (delay de 5 segundos)
  Or: *bpu (break on request)

FiddlerScript (Scripting C#):

// Auto-modificar requests
static function OnBeforeRequest(oSession: Session) {
    // Añadir header a todos los requests API
    if (oSession.uriContains("/api/")) {
        oSession.oRequest["X-Test-Mode"] = "true";
    }
    
    // Bloquear analytics
    if (oSession.uriContains("analytics.google.com")) {
        oSession.oRequest.FailSession(404, "Bloqueado", "");
    }
}

// Auto-modificar respuestas
static function OnBeforeResponse(oSession: Session) {
    // Forzar CORS
    if (oSession.uriContains("/api/")) {
        oSession.oResponse["Access-Control-Allow-Origin"] = "*";
    }
    
    // Log de respuestas lentas
    if (oSession.Timers.ClientDoneResponse.Subtract(oSession.Timers.ClientBeginRequest).TotalMilliseconds > 2000) {
        FiddlerObject.log("Request lento: " + oSession.fullUrl);
    }
}

Filtros:

Pestaña Filters:

Hosts:
  Show only: api.example.com
  Hide: cdn.example.com

Client Process:
  Show only: chrome.exe

Breakpoints:
  Break request on POST
  Break response on status 500

Request Builder: Más avanzado que Composer:

Request Builder > New Request

Templates:
  - REST API GET
  - REST API POST with JSON
  - SOAP Request
  - GraphQL Query

Guardar como colección para reutilizar

Comparación Charles vs Fiddler

Característica	Charles	Fiddler Classic	Fiddler Everywhere
Plataforma	Mac, Windows, Linux	Solo Windows	Mac, Windows, Linux
Precio	$50 (perpetuo)	Gratis	$150/año suscripción
UI	Nativa (Java Swing)	Nativa (WinForms)	Electron (moderna)
Curva Aprendizaje	Media	Media	Fácil
Rendimiento	Bueno	Excelente	Bueno
Scripting	Limitado	C# (potente)	JavaScript
Setup SSL	Fácil	Fácil	Muy fácil
Testing Móvil	Excelente	Excelente	Excelente
Mocking Requests	Map Local/Remote	AutoResponder	Mock Server
Throttling Red	Sí	Sí	Sí
Testing API	Básico	Composer	Avanzado (colecciones)
Mejor Para	Usuarios Mac, simplicidad	Power users Windows	Equipos, multiplataforma

Flujo de Trabajo para Testing Móvil

Setup completo para testing móvil:

Configurar Proxy en Dispositivo:

iOS:
  Settings > Wi-Fi > [Red] > Configure Proxy
  Manual: [IP Computadora]:8888

Android:
  Settings > Wi-Fi > [Red] > Advanced
  Proxy: Manual
  Hostname: [IP Computadora]
  Port: 8888

Instalar Certificado SSL (ver setup de Charles arriba)
Habilitar SSL Proxying para dominios de la app
Escenarios Comunes de Testing Móvil:

Probar Manejo de Errores API:

Usar Breakpoints para cambiar estado de respuesta a 500
Verificar que app muestra mensaje de error apropiado
Verificar si funciona mecanismo de reintentos

Probar Modo Offline:

Usar Map Local para retornar respuestas cacheadas
Bloquear requests específicos
Verificar funcionalidad offline

Probar Diferentes Versiones de API:

Usar Map Remote para apuntar a diferentes versiones de API
Probar compatibilidad hacia atrás
Probar escenarios de migración

Probar Redes Lentas:

Aplicar throttling (configuración 3G)
Verificar estados de carga
Verificar manejo de timeout
Probar carga progresiva de imágenes

Capturar para Reportes de Bugs:

Grabar sesión completa
Exportar archivo HAR
Incluir en reporte de bug con pasos para reproducir

Elegir las Herramientas Correctas

Matriz de Selección de IDE

Caso de Uso	VS Code	IntelliJ IDEA
Tests JavaScript/TypeScript	✓✓✓ Excelente	✓✓ Bueno
Automatización tests Java	✓ Básico	✓✓✓ Excelente
Testing Python	✓✓✓ Excelente (con extensiones)	✓✓ Bueno (PyCharm mejor)
Proyectos multi-lenguaje	✓✓✓ Excelente	✓✓ Bueno
Liviano/Inicio rápido	✓✓✓ Excelente	✓ Más lento
Características integradas	✓ Necesita extensiones	✓✓✓ Excelente
Gratis/Open source	✓✓✓ Gratis	✓ Community Edition
Testing API	✓✓ Bueno (extensiones)	✓✓✓ Integrado

Combinaciones de Herramientas Recomendadas

Automatización Tests Frontend:

IDE: VS Code
Extensiones: Playwright, Jest, ESLint
Navegador: Chrome DevTools
Proxy: Charles

Testing API Backend:

IDE: IntelliJ IDEA / VS Code
Herramientas: REST Client, Postman
Proxy: Charles / Fiddler
Base de datos: DBeaver / IntelliJ Database Tools

Testing Móvil:

IDE: VS Code / Android Studio
Proxy: Charles (mejor soporte móvil)
Device Mirroring: scrcpy
Rendimiento: Chrome DevTools (depuración remota)

Testing Full Stack:

IDE: VS Code (workspace multi-root)
Navegador: Chrome DevTools
API: IntelliJ HTTP Client / Thunder Client
Proxy: Charles

Ruta de Aprendizaje

Semana 1-2: Básicos de IDE

Configurar VS Code o IntelliJ IDEA
Instalar extensiones/plugins esenciales
Aprender atajos de teclado
Configurar depuración
Crear snippets personalizados

Semana 3-4: Browser DevTools

Dominar paneles Elements y Console
Aprender análisis de Network
Practicar depuración JavaScript
Crear snippets reutilizables
Ejecutar auditorías Lighthouse

Semana 5-6: Herramientas Proxy

Instalar y configurar Charles/Fiddler
Configurar SSL proxying
Practicar modificación de requests
Crear respuestas mock con Map Local
Probar apps móviles

Semana 7-8: Técnicas Avanzadas

Combinar herramientas en flujo de trabajo de testing
Crear helpers automatizados de test
Construir scripts de depuración personalizados
Documentar mejores prácticas del equipo
Entrenar a otros miembros del equipo

Tips de Productividad

1. Atajos de Teclado Aprende estos primero:

VS Code: Cmd/Ctrl + P (quick open), Cmd/Ctrl + Shift + P (command palette)
DevTools: Cmd/Ctrl + Shift + C (inspeccionar elemento), Cmd + K (limpiar console)
Charles: Cmd/Ctrl + K (limpiar sesión), Cmd/Ctrl + R (iniciar/detener grabación)

2. Snippets Personalizados Crea snippets para:

Patrones comunes de test
Plantillas de requests API
Scripts de depuración en console
Generadores de datos mock

3. Organización de Workspace

Usa workspaces multi-root para proyectos complejos
Crea .vscode/tasks.json para operaciones comunes
Guarda configuraciones de depuración
Organiza sesiones de proxy por feature

4. Documentación Documenta en la wiki de tu equipo:

Instrucciones de setup de IDE
Extensiones/plugins requeridos
Configuraciones de depuración
Setup de proxy para proyectos
Pasos comunes de troubleshooting

5. Automatización Automatiza tareas repetitivas:

Scripts de ejecución de tests
Generación de reportes de cobertura
Scripts de análisis de archivos HAR
Monitoreo de rendimiento de red

Conclusión

Dominar las herramientas correctas transforma la eficiencia del testing. VS Code e IntelliJ IDEA proporcionan entornos potentes para desarrollo de tests con las extensiones y configuraciones adecuadas. Browser DevTools ofrece información incomparable sobre el comportamiento de la aplicación. Herramientas proxy como Charles y Fiddler permiten inspección y manipulación profunda de API.

La clave no es aprender cada característica de cada herramienta, sino:

Elegir herramientas que se ajusten a tu stack tecnológico
Dominar las características que usas diariamente (regla 80/20)
Automatizar tareas repetitivas con snippets y scripts
Documentar tu setup para consistencia del equipo
Aprender continuamente a medida que las herramientas evolucionan

Comienza con una herramienta de cada categoría (IDE, DevTools, Proxy), desarrolla competencia, luego expande tu toolkit. Recuerda: las herramientas son multiplicadores de fuerza, pero la experiencia en testing es lo que más importa.

Próximos Pasos:

Configura tu IDE principal con extensiones esenciales hoy
Practica browser DevTools diariamente durante el testing
Instala y configura una herramienta proxy esta semana
Crea tu primer snippet personalizado o configuración de depuración
Comparte tus aprendizajes con tu equipo

¡Feliz testing!