There is a function that retrieves all CSS properties and values of an element:
function fetchAllCssPropertiesAndValues(element: Element) {
const style = window.getComputedStyle(element)
const propertiesAndValues = {}
for (let i = 0; i < style.length; i++) {
const propertyName = style[i]
const value = style.getPropertyValue(propertyName)
propertiesAndValues[propertyName] = value
}
return propertiesAndValues
}
To use it, simply do:
cy.get('#my-element').then($el => {
console.log(fetchAllCssPropertiesAndValues($el[0]))
})
When making it into a custom command, the expected CSS properties are not retrieved:
This is the custom command in progress:
export {}
declare global {
namespace Cypress {
interface Chainable {
fetchAllCssPropertiesAndValues: typeof fetchAllCssPropertiesAndValues
}
}
}
const fetchAllCssPropertiesAndValues = (element: Element) => {
const style = window.getComputedStyle(element)
const propertiesAndValues = {}
for (let i = 0; i < style.length; i++) {
const propertyName = style[i]
const value = style.getPropertyValue(propertyName)
propertiesAndValues[propertyName] = value
}
return propertiesAndValues
}
Cypress.Commands.add('fetchAllCssPropertiesAndValues', fetchAllCssPropertiesAndValues)
Utilize the custom command like this:
cy.get('my-element').then($el => {
console.log(cy.fetchAllCssPropertiesAndValues($el[0]))
})
Double check if there may be any mistakes or misunderstandings in implementation.