0

What I am trying to do is:

  1. Load the page
  2. Gain access to the contents of an external css named "mystyle.css"
  3. Check if ".some_class" border has the value "2px"

I have tried

describe('CSS tests', () => {
    it('.some_class border is 2px', async function () {
        await page.goto(<homepageurl>);
        const stylesheet = await page.evaluate(() => {
            return document.querySelector("link[href*='mystyle.css']");
        });
        console.log(current_styles);
        // rest of the code
    });
});

I am getting an empty object {} as a result so I am lost and don't know how to carry on.

Faith Baghan
  • 71
  • 5
  • 2
    `querySelector('link')` returns a link Element, not the actual contents of the CSS URL. Try inspecting and searching within `document.styleSheets` object. Also see [`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle). – anthumchris Jan 18 '22 at 04:15
  • As an aside, `evaluate` can only return serialized JSON, not a DOM tree. `evaluateHandle` would make more sense, if getting a node is what you want to do (but it won't have any style info, it's just a link and you already know where the link points, so you might as well request `mystyle.css` directly, then parse it and check your property as described above). – ggorlen Jan 18 '22 at 17:05

0 Answers0