Issue
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?
Solution
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.
Answered By - Micky