How to get the information in a list of links puppeteer

Question

I'm trying to scrape information with Puppeteer from a webpage that show a table with links.

When you open one link, a modal with more information opens.

I'm trying to open all links, and take info in all of them.

This is my code:

const puppeteer = require('puppeteer');
const fs = require('fs');
puppeteer.launch({headless: false}).then(async browser => {
    const page = await browser.newPage();
    await page.goto('https://fcylf.es/competiciones');

    const competitionframe = await page.frames().find(f => f.name() === 'iframecombos');

    const button = await competitionframe.$('#formulario > div.centrado > input.btn.btn-danger.boton_envio.btn-lg');
    button.click();

    let mainframe = await page.frames().find(f => f.name() === 'iframebooox');
    await mainframe.waitForSelector('#datos > ul > li:nth-child(3) > a');
    const div = await mainframe.$('#datos > ul > li:nth-child(3) > a');
    div.click();


    await mainframe.waitForSelector('#clasificacion > .panel > .table-responsive > #resultadosTable > tbody > tr > td > div > a');
    const teams = await mainframe.$$('#clasificacion > .panel > .table-responsive > #resultadosTable > tbody > tr > td > div > a ');

    const results = [];
    for(let team of teams){

        team.click();
        await mainframe.waitForSelector('#myModalLabel');
        const name = await mainframe.$eval('#myModalLabel', name => name.textContent );
        results.push(name);

        const closebt = await mainframe.$('#datos > div.equipoModal.modal.fade.in > div > div > div.modal-footer > button');
        if(closebt!=null){
            closebt.click();
        }
    }
    console.log(results);
});

But when I show log, it shows always the same result.

Answer 1

I think you want to find #myModalLabel in the div that is set to display: block;

Hidden modal:

<div class="equipoModal modal fade" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true" style="display: none;">

Shown modal:

<div class="equipoModal modal fade in" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="false" style="display: block;">

This line:

const name = await mainframe.$eval('#myModalLabel', name => name.textContent );

Looks like it's grabbing textContent out of the hidden modals, not the one showing.

I think. Hope this helps!