Unable to assert css width to be 100%

Question

I'm trying to assert the CSS width of an element in NightwatchJS to be 100%, but it fails saying that the width is 196px. The error message is :

Testing if element <[data-e2e="base-button"][class="xs block"]> has css property "width: 100%". - Expected "100%" but got: "196px"

I have tried using the following syntaxes for the same:

page.assert.cssProperty(`@button-element`, 'width', '100%');
page.expect.element(`@${element}`).to.have.css("width").which.equals("100%");

I don't want to use hard-coded values, as they can change depending on the container width. What is the right way to do it?

I'm using Page Object Model here but can do without it.

Answer 1

Why don't you first get the width of the parent, then the width of the child and do a comparison between them to calculate the percentage?

I don't use nightwatch myself, but the psuedo code from what you've described above should be something along the lines of:

const {expect} = require('chai');
let buttonParentSize = page.get.cssProperty(`@button-parent`, 'width'),
    buttonSize = page.get.cssProperty(`@button-element`, 'width'),
    buttonSizePercentage = (buttonSize / buttonParentSize)*100;

expect(buttonSizePercentage).to.equal('100');