[Question] how to get values from XML File (XML File in Browser)

[osmenia]

Hi Team,

I would like to ask, how to loop through tag Food, and get the values inside the tag food (name, price,description, calories)

thanks a lot!

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch({
    headless: false,
    defaultViewport: { width: 1920, height: 1080 },
    slowMo: 30,
  });
  const crContext = await browser.newContext();
  const page = await crContext.newPage();
  await page.goto("C:\\playwright"); //Open Folder

  await page.click("#tbody > tr:nth-child(10) > td:nth-child(1) > a"); // Click on XML File

  const handles = await page.$$("div.expanded"); // through tag Food

  //how to get values inside tag Food

  console.log(handles); // getting [] output
  //await page.close();
  //await browser.close();
})();

XML:

 <?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
  <food>
    <name>Belgian Waffles</name>
    <price>$5.95</price>
    <description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
    <calories>650</calories>
  </food>
  <food>
    <name>Strawberry Belgian Waffles</name>
    <price>$7.95</price>
    <description>Light Belgian waffles covered with strawberries and whipped cream</description>
    <calories>900</calories>
  </food>
  <food>
    <name>Berry-Berry Belgian Waffles</name>
    <price>$8.95</price>
    <description>Light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
    <calories>900</calories>
  </food>
  <food>
    <name>French Toast</name>
    <price>$4.50</price>
    <description>Thick slices made from our homemade sourdough bread</description>
    <calories>600</calories>
  </food>
  <food>
    <name>Homestyle Breakfast</name>
    <price>$6.95</price>
    <description>Two eggs, bacon or sausage, toast, and our ever-popular hash browns</description>
    <calories>950</calories>
  </food>
</breakfast_menu>

[aslushnikov]

I would like to ask, how to loop through tag Food, and get the values inside the tag food (name, price,description, calories)

Hey @osmenia,

Using page.$$eval would be the most performant and convenient:

const playwright = require('playwright');

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  // I saved your XML file to `a.xml`. 
  await page.goto('file://' + __dirname + '/a.xml');
  // Query all `food` tags on the page, and run the function in the page context.
  console.log(await page.$$eval("food", foods => foods.map(food => ({
    name: food.querySelector('name').textContent,
    price: food.querySelector('price').textContent,
    description: food.querySelector('description').textContent,
    calories: food.querySelector('calories').textContent,
  }))));
  await browser.close();
})();