He estado usando JavaScript durante algunos años escribiendo scripts para pruebas automatizadas para aplicaciones de escritorio. Sin embargo, recientemente pasé a escribir pruebas automatizadas para aplicaciones web usando Playwright. Tuve que aprender a trabajar con los selectores html/css. Una cosa que se me ha escapado es si hay una manera (creo que debe haberla) de especificar un elemento en una página usando un elemento principal y luego el elemento secundario.
Por ejemplo, tengo una ventana emergente que es una página de inicio de sesión básica con ID y contraseña. Los cuadros de texto para id y contraseña no tienen propiedades únicas a las que apuntar, solo <input type="text"> . Sin embargo, todo el inicio de sesión tiene la clase de "opciones de página" que sé que puedo tomar con document.querySelector('.page-options'); . ¿Hay alguna manera de hacer referencia a las entradas usando await page.fill(); del dramaturgo?
<div class="page-options"> <div> <label>Page ID</label> <input type="text"> </div> <div> <label>Page Password</label> <input type="text"> </div> </div>Use el texto de la etiqueta para identificar la entrada requerida:
await page.locator('text="Page ID" >> .. >> input').fill('name'); // label >> parent >> input await page.locator('text="Page Password" >> .. >> input').fill('secret'); const value = await page.locator('text="Page Password" >> .. >> input').inputValue() expect(value).toEqual('secret')Puede hacer algo como esto usando el selector de elemento N-ésimo :
//For username await page.locator('input[type="text"] >> nth=0').fill('value'); //For password await page.locator('input[type="text"] >> nth=1').fill('value');