Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

90
Views
reading td-child from a td-child Playwright

i'm triying to read the td-child from a table that has a lot of Td-Child and I can't get the information back, my array comes back null.

here is the code:

 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(),
            }
          })
        })

based on what I know it should be reading the table an bringing me the information but for some reason it doesn't do it.

the structure of the HTML is the following:

enter image description here

I want to get the td information of all tr on the table.

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

I think your selector is selecting the table body, not all the table rows. But in any case, you can just define a function to do this specific task and pass the entire function into your eval statement. Here's an example that you might have to change a little bit, but it should scrape the data from every row in the table.

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;
}

I recommend you put this above code into a Chrome DevTools Snipppet and edit/run it over and over again until you get what you want. Then, copy paste it into Playwright.

about 4 years ago · Juan Pablo Isaza Report

0

You can use the :scope method in playwright to collectively get all the innertexts in one go and then using the forEach loop get them one by one. Something like this:

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
})

You can read more scope in the Playwright Docs.

about 4 years ago · Juan Pablo Isaza Report

0

Just add tr to your 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);

Also, you can make a lookup of the columns

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
  })
})
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!