import launcher from 'k6/x/browser';
import { group, sleep } from 'k6';

export default function () {
  const browser = launcher.launch('chromium', {
    headless: false,
  });

  const context = browser.newContext({
  });

  const page = context.newPage();

  group("Navigate to Homepage", () => {
    page.goto('https://trollflix.com'); // without the below waitForSelector, the page.$$ expression returns a length of 0

    page.waitForSelector('div.cb-content'); // required here even if I were to use waitUntil: 'networkidle' above
    
    // grab the number of displayed videos (should be 12)
    const videoCount = page.$$('div.cb-content').length;
    console.log(`Found ${videoCount} in page`);
  });

  sleep(2);

  group("Filter by Gaming", () => {
    page.hover('#hn-categories');

    sleep(1);

    // without the below waitForSelector, the page.$$ expression returns a length of 0 (interestingly, not the previous value - 12 - so the expression was evaluated after the page partially refreshed)
    page.$('//div[text()="Gaming"]').click(); 

    page.waitForSelector('div.cb-content'); // waiting for the div here ensures the videoCount updates as expected

    // grab the number of displayed videos (should be 2)
    const videoCount = page.$$('div.cb-content').length;
    console.log(`Found ${videoCount} in page`);
  });
}