Javascript para QA: Conditions and loops
Los programas que realizamos normalmente toman decisiones, según las cuales se ejecutan las acciones destinadas para el camino tomado. Por ejemplo, una persona que al salir del colegio está decidiendo si estudiar Ingeniería Biomédica, Ingeniería de Software, o veterinaria, esta decisión determinará probablemente cuál será su futuro profesional. Otro ejemplo es, un usuario que tiene la opción de registrarse en el sitio web mediante fb o ingresando sus datos de manera manual, en consecuencia puede tener una cuenta enlazada a su perfil de fb directamente o una cuenta con los datos de registro proporcionados anteriormente.
El condicional que probablemente vayas a usar más:
If…else
El if ejecuta una un bloque de código especificado si la condición es truthy. Si la condición es falsy, otro bloque se ejecutará. La sintaxis básica es:
if (condición) {
// Código a ejecutar si la condición es verdadera
} else {
// Código a ejecutar si la condición es falsa
}Un ejemplo de su uso es:
var hora = 14;
if (hora < 12) {
console.log("Buenos días.");
} else if (hora < 18) {
console.log("Buenas tardes.");
} else {
console.log("Buenas noches.");
}Un ejemplo en la automatización, que valida dos tipos de Banners en el sitio web:
Else if
A diferencia de otros lenguajes, en JavaScript no existe la palabra elseif, pero se pueden anidar múltiples declaraciones if…else creando una cláusula. Se utiliza para comprobar más de una condición en orden, después de la evaluación de la primera condición del bloque if.
var edad = 25;
if (edad < 18) {
console.log("Eres menor de edad.");
} else if (edad >= 18 && edad < 65) {
console.log("Eres adulto.");
} else {
console.log("Eres mayor de edad.");
}Operador ternario
Este condicional me gusta mucho, puede ser muy útil y hacer lucir tu código más limpio, es muy fácil de interpretar, casi tan legible como el if pero más abreviado.
Este condicional tiene tres operandos, primero una condición que es seguida por un ?, luego una expresión que se ejecuta si la condición se cumple, es decir es truthy, sigue un : y el tercer operando es una expresión que se ejecuta si la condición es falsy, la sintaxis sería la siguiente: condition ? exprIfTrue : exprIfFalse
const edad = 26;
const bebida = edad >= 21 ? "Cerveza" : "Jugo";
console.log(bebida); // "Cerveza"
//Cuando tenemos valores Null
const saludo = (persona) => {
const nombre = persona ? persona.nombre : "desconocido";
return `¡Hola, ${nombre}!`;
};
console.log(saludo({ nombre: "Alice" })); // "¡Hola, Alice!"
console.log(saludo(null)); // "¡Hola, desconocido!"o al igual que con el if, anidamos, entonces puedo encadenar las declaraciones
function example() {
return condition1 ? value1 : condition2
? value2 : condition3
? value3 : value4;
}que es lo mismo al if anidado
function example() {
if (condition1) {
return value1;
} else if (condition2) {
return value2;
} else if (condition3) {
return value3;
} else {
return value4;
}
}Un ejemplo simple del condicional ternario anidando es
const hora = 19;
const mensaje =
hora < 12 ? "Buenos días" : hora < 18 ? "Buenas tardes" : "Buenas noches";
console.log("La hora es: " + hora); //La hora es: 10
console.log("El saludo es: " + mensaje); //El saludo es: Buenos díasPodemos jugar con este operador a como nos convenga
const edad = 67;
const categoria =
edad < 18 ? "Menor de edad" : edad < 65 ? "Adulto" : "Mayor de edad";
const mensaje =
categoria === "Menor de edad"
? "Eres menor de edad."
: categoria === "Adulto"
? "Eres adulto."
: "Eres adulto mayor";
console.log("La edad es: " + edad); //La edad es: 67
console.log("La categoría es: " + categoria); //La categoría es: Mayor de edad
console.log("El mensaje es: " + mensaje); //El mensaje es: Eres adulto mayorSwitch case
El condicional switch evalúa la expresión respecto a los case que tiene definidos, hasta encontrar el case que coincide con su valor y ejecuta el bloque de código dentro de este case hasta llegar a la declaración del break. En caso de que ningún case coincida se ejecutará el valor por Default.
const postre = "Tarta de Manzana";
switch (postre) {
case "Pastel de Chocolate":
console.log("El pastel de chocolate cuesta $4.99 por rebanada.");
break;
case "Tarta de Manzana":
console.log("La tarta de manzana cuesta $5.50 por porción.");
// Salida esperada: "La tarta de manzana cuesta $5.50 por porción."
break;
case "Tarta de Fresa":
console.log("La tarta de fresa cuesta $3.50 por porción.");
// Salida esperada: "La tarta de fresa cuestan $3.50 por porción."
break;
default:
console.log(`Lo siento, no tenemos ${postre}.`);
}Loops
Los bucles en JavaScript nos permiten realizar tareas repetitivas basadas en una condición, lo que facilita realizar estas tareas de manera rápida y sencilla. Las condiciones generalmente devuelven un valor, ya sea verdadero o falso, y el bucle continuará ejecutándose hasta que la condición devuelva falso.
While Loop
El bucle while comienza evaluando una condición antes de ejecutar el bloque de código. Si la condición se evalúa como verdadera, se ejecuta el bloque de código. Si la condición se evalúa como falsa, el código no se ejecutará y el bucle termina. La sintaxis es la siguiente:
while (condition) {
// statement
}
Ejemplo:
let i = 1;
while (i < 10) {
console.log(i);
i++;
}
// Salida:
// 1
// 2
// 3
// 4
// 5
// 6
// 7
// 8
// 9Do While
Este bucle es semejante al while, pero la diferencia recae en que en el bucle do while la condición se valida al final de cada iteración del bucle, en lugar de al principio antes de que se ejecute el bucle como lo mencionamos anteriormente para el while. Por esta razón, siempre se ejecutará al menos una vez el bloque de código.
Ejemplo de cuando la condición es evaluada como verdadera en varias iteraciones
let num = 40;
do {
console.log(num);
num++;
} while (num < 45);
// Salida:
40;
41;
42;
43;
44;Cuando la condición no se cumple
let num = 46;
do {
console.log(num);
num++;
} while (num < 45);
// Salida: 46For Loop
El bucle for permite ejecutar un bloque de código un número determinado de veces.
La sintaxis es simple, consta de tres expresiones, inicialización que se ejecuta antes de cada iteración del bucle, donde colocamos el contador usualmente i = 0 o desde el número que deseemos comenzar las iteraciones. Condición se ejecuta después de cada iteración, si es verdadera se ejecuta el código dentro de las {}, si es falsa se detiene el bucle. La expresión final se ejecuta después de cada iteración, se utiliza para incrementar el contador o decrementarlo.
for (let i = 0; i < 10; i++) {
console.log(i);
}
let datos = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
console.log("Número de elementos es: " + datos.length);
for (let x = 1; x <= datos.length; x++) {
console.log("Número de repeticiones: " + x);
}
//Salida:
Número de elementos es: 12
Número de repeticiones: 1
Número de repeticiones: 2
Número de repeticiones: 3
Número de repeticiones: 4
Número de repeticiones: 5
Número de repeticiones: 6
Número de repeticiones: 7
Número de repeticiones: 8
Número de repeticiones: 9
Número de repeticiones: 10
Número de repeticiones: 11
Número de repeticiones: 12For In
El bucle for in itera sobre las propiedades de un objeto, y por cada propiedad ejecuta el bloque de código. Por ejemplo, en mis automatizaciones lo utilizo para recorrer objetos donde tengo mapeados los elementos del sitio web y sus atributos de mi interés, así por cada uno de estos elementos que tengo mapeados en un Json, ejecutaré una tarea que es ir a ese elemento web y validar si tiene una url correcta, el texto correcto, etc.
for (property in object) {
// code
}Por ejemplo, para validar los diferentes párrafos que tiene una sección del sitio web:
For of
Este bucle itera sobre los valores de iterables como arrays, built-in String, colecciones como Set y Map, pero lo más seguro es que como qa utilices el for of en arrays. Funciona igual, para cada valor del iterable se va a ejecutar el bloque de código.
for (variable of object) {
// code
}
const array = [1, 2, 3, 4, 5];
for (const element of array) {
console.log(element);
}
//Salida:
1
2
3
4
5Extra: No entra directamente en esta sección, pero quiero incluir el forEach porque sé que lo utilizaras mucho en tu automatización.
forEach
Permite iterar sobre elementos de un array, ya que es un método de Array, nos permite ejecutar una función una vez por cada elemento del array, por ende se comportaría como un bucle al permitirnos ejecutar un bloque de código por cada item del array.
const array = [1, 2, 3, 4, 5];
array.forEach(function (element) {
console.log(element);
});
//Salida:
1;
2;
3;
4;
5;Por ejemplo, si deseo acceder a un listado de URL, como todas las secciones de un sitio web:
Cibergrafia:
