Test background style has changed on hover

Question

As the title states I want to test that my simple style is applied to an element on hover. This code below "works" but it's not quite doing what I want.

it('changes style on hover', async () => {
  const page = await newE2EPage();
  await page.setContent('<some-button></some-button>');

  const button = await page.find('some-button >>> button');
  await button.hover();
  await page.waitForChanges();
  const background = (await button.getComputedStyle()).background;
  expect(background).toBe('rgb(104, 107, 149) none repeat scroll 0% 0% / auto padding-box border-box');
});

I don't want 'rgb(104, 107, 149) none repeat scroll 0% 0% / auto padding-box border-box' but the hex value.

Here's my CSS:

button:hover:not([disabled]) {
  background: #686B95;
}

Is there a better way to do this?

Answer 1

Looks like I would have to implement an rgb to hex function which is overkill for what I'm testing but I was able to solve my issue. Ignoring the fact that I'm applying my style as hex it will be returned by getComputedStyle as rgb so I can test for that by changing background in my css to background-color and pull that like so:

const style = (await button.getComputedStyle()).getPropertyValue('background-color');
// working rgb to hex conversion https://g.co/kgs/VCGy9H
expect(style).toBe('rgb(104, 107, 149)');

Here I can see that the hover style is being applied properly and my test passes.