Estoy tratando de leer el td-child de una tabla que tiene muchos Td-Child y no puedo recuperar la información, mi matriz vuelve nula.
aquí está el código:
const detalleDatos = await page2.$$eval('#gvContents > tbody', (users) => { return users.map(user => { // obtener la informacion de la tabla para generar el array const orden = user.querySelector('td:nth-child(1)') const pedido = user.querySelector('td:nth-child(2)') const factura = user.querySelector('td:nth-child(3)') const artículo = user.querySelector('td:nth-child(4)') const sku = user.querySelector('td:nth-child(5)') const unidadesContenedores = user.querySelector('td:nth-child(6)') const unidadesContenedoresCargados = user.querySelector('td:nth-child(7)') const PesoLb = user.querySelector('td:nth-child(8)') const PesoKg = user.querySelector('td:nth-child(9)') const CubosFt = user.querySelector('td:nth-child(10)') const CubosM = user.querySelector('td:nth-child(11)') const PrecioUd = user.querySelector('td:nth-child(12)') const PrecioExt = user.querySelector('td:nth-child(13)') return { orden: orden.textContent.trim(), pedido: pedido.textContent.trim(), factura: factura.textContent.trim(), artículo: artículo.textContent.trim(), sku: sku.textContent.trim(), unidadesContenedores: unidadesContenedores.textContent.trim(), unidadesContenedoresCargados: unidadesContenedoresCargados.textContent.trim(), PesoLb: PesoLb.textContent.trim(), PesoKg: PesoKg.textContent.trim(), CubosFt: CubosFt.textContent.trim(), CubosM: CubosM.textContent.trim(), PrecioUd: PrecioUd.textContent.trim(), PrecioExt: PrecioExt.textContent.trim(), } }) })según lo que sé, debería estar leyendo la tabla y brindándome la información, pero por alguna razón no lo hace.
la estructura del HTML es la siguiente:
Quiero obtener la información td de todos los tr en la tabla.
Creo que su selector está seleccionando el cuerpo de la tabla, no todas las filas de la tabla. Pero en cualquier caso, puede simplemente definir una función para realizar esta tarea específica y pasar la función completa a su declaración de evaluación. Aquí hay un ejemplo que quizás tenga que cambiar un poco, pero debería eliminar los datos de cada fila de la tabla.
function getTableData() { let results = []; const table = document.getElementById('gvContents'); if (!table) { throw Error('Table not found.'); } // loop over all rows table.querySelectorAll('tr').forEach((row) => { // for each row, loop over all TDs const rowResults = []; row.querySelectorAll('td').forEach((item) => { rowResults.push(item.innerText.trim()); }); results.push(rowResults); }); console.log(results); return results; }Le recomiendo que coloque este código anterior en un fragmento deChrome DevTools y lo edite/ejecute una y otra vez hasta que obtenga lo que desea. Luego, cópielo y péguelo en Playwright.
Puede usar el método :scope en dramaturgo para obtener colectivamente todos los textos internos de una sola vez y luego usar el bucle forEach para obtenerlos uno por uno. Algo como esto:
const tdElements = page.locator('td') const tdTexts = await tdElements.locator(':scope').allInnerTexts() await tdTexts.forEach((text) => { console.log(text.trim()) //prints each texts one by one })Puede leer más sobre el alcance en Playwright Docs .
Simplemente agregue tr a su selector
const detalleDatos = await page2.$$eval('#gvContents tbody tr', (users) => { return users.map(user => { // obtener la informacion de la tabla para generar el array const orden = user.querySelector('td:nth-child(1)') const pedido = user.querySelector('td:nth-child(2)') const factura = user.querySelector('td:nth-child(3)') const artículo = user.querySelector('td:nth-child(4)') const sku = user.querySelector('td:nth-child(5)') const unidadesContenedores = user.querySelector('td:nth-child(6)') const unidadesContenedoresCargados = user.querySelector('td:nth-child(7)') const PesoLb = user.querySelector('td:nth-child(8)') const PesoKg = user.querySelector('td:nth-child(9)') const CubosFt = user.querySelector('td:nth-child(10)') const CubosM = user.querySelector('td:nth-child(11)') const PrecioUd = user.querySelector('td:nth-child(12)') const PrecioExt = user.querySelector('td:nth-child(13)') return { orden: orden.textContent.trim(), pedido: pedido.textContent.trim(), factura: factura.textContent.trim(), artículo: artículo.textContent.trim(), sku: sku.textContent.trim(), unidadesContenedores: unidadesContenedores.textContent.trim(), unidadesContenedoresCargados: unidadesContenedoresCargados.textContent.trim(), PesoLb: PesoLb.textContent.trim(), PesoKg: PesoKg.textContent.trim(), CubosFt: CubosFt.textContent.trim(), CubosM: CubosM.textContent.trim(), PrecioUd: PrecioUd.textContent.trim(), PrecioExt: PrecioExt.textContent.trim(), } }) }) console.dir(detalleDatos);Además, puede hacer una búsqueda de las columnas
const cols = [ 'orden', 'pedido', 'factura', ... and so on } const detalleDatos = await page2.$$eval('#gvContents tbody tr', (users) => { return users.map(user => { result = {} cols.forEach((col, index) => { const cell = user.querySelector(`td:nth-child(${index})`) const text = cell.textContent.trim() result[name] = text } return result }) })