getting the value of a pseudo-element with protractor

Question

I'd like to verify the text content of a pseudo-element. The promise returned from using ptor.executeScript("window.getComputedStyle(jQuery('.my-class')[0], ':after').content").then(function(data){ console.log(arguments) // {'0':null} });

I've also tried dropping that in the expectation, but I'd guess that fails for the same reason.

Since the CSS Declaration for this is pointing at one of the element's attributes anyway, should I just try to read that attribute?

Answer 1

executeScript will waits for you to return a value - so you'll need to do:

ptor.executeScript("return window.getComputedStyle(jQuery('.my-class')[0], ':after').content")
    .then(function(data){ console.log(arguments)});

Answer 2

As an updated answer based up the one from our good friend Julie aka "Protractor Wizard."

I didn't have jQuery available to get my pseduo-element so I did this...

describe('#swPopover Component', () => {
    it('should show the popover message when hovered', () => {
      browser.actions().mouseMove(objectsPage.popover).perform();
      browser.executeScript('return window.getComputedStyle(document.querySelector(".sw-popover"), ":after").content')
        .then(data => expect(data).toBe('"I am the popover text"'));
    });
  });