Is there a way to apply a style to all elements in Cypress? Like one would do with the star selector:
* {
overflow-x: hidden;
}
I need this for visual regression snapshots, because of scrollbars that appear, and haven't been able to find something simple and elegant in Cypress. Currently doing something like this:
cy.get('[data-cy="some-tag"]').invoke('css', 'overflow-x', 'hidden');
But of course this isn't great, because every element that has scrollbars has to be targetted and set.
You can change the DOM just before any screenshot is taken by using onBeforeScreenshot and onAfterScreenshot callbacks. This will hide the scrollbar on the element the screenshot command was called on, and restore it afterwards:
Cypress.Screenshot.defaults({
onBeforeScreenshot($el) {
$el.css('overflow', 'hidden');
},
onAfterScreenshot($el, props) {
$el.css('overflow', 'auto');
},
});
You can put this function in support/index.js file since it is loaded before any test files.
Note: if you just call cy.screenshot() then the $el will be the document and you can use .find(<selector>) command to get any child elements within the page.
Works great with cypress-visual-regression plugin.
Reference: https://docs.cypress.io/api/cypress-api/screenshot-api#Change-the-DOM-using-onBeforeScreenshot-and-onAfterScreenshot
Related
Any idea how does one remove an element from the dom in nextjs on componentwillunmount?
I'm using the Head component to load a JS script that generates an element on a page.
When I navigate to another page, that element still stays so I need to remove it.
I thought of using componentwillunmount and document.getelementbyclassname, but it doesn't work in nextjs for some reason.
Any thoughts on how to solve it?
This doesn't do anything, even though the button is being picked up:
componentDidMount() {
oldButton2 = document.getElementsByClassName("button");
}
componentWillUnmount() {
if (oldButton2.parentNode) {
oldButton2.parentNode.removeChild(oldButton2);
}
}
I am trying to use paper-dialog within my custom component.
I want to be able to open the dialog from outside the component. What is the best way to do this? (all the examples work directly on the component)
Also the dialog requires me to call "open()" on it to open it.
In the examples I found I found:
this.$.dialog.open();
But this doesn't seem to work with lit-element
I got it to work using shadowRoot, not sure this is the best option:
render() {
return html`
<style>
</style>
<paper-dialog id="dialog">
<h2>Content</h2>
</paper-dialog>
`;
}
firstUpdated(changedProperties) {
console.log("firstUpdated called")
if (this.shown == "true")
{
// this.$.dialog.open();
this.shadowRoot.getElementById("dialog").open()
}
}
I added a property to my element called "shown"
static get properties() {
return {
shown: Boolean,
Thinking I could pass this from the outside into my component, but it doesnt seem to do the trick either (I can set it once with the custom element propery, but changes to it from the out side dont seem to work.
Generally, if you are aggregating a dialog within an element that has other UI elements then you shouldn't be showing/hiding the dialog from outside the element - the event that triggers the dialog should be raised and handled with the containing element.
That said, if it's absolutely necessary, then I prefer a "showDialog" method (not a property). Closing the dialog should be triggered by a dialog button or loss of focus, so you don't need to expose a close method.
I've built a table with react-table and want to use the react-select component as as filtering component. All is up and running except that the dropdown from the react-select component gets hidden by the table.
I've been working quite a long time on this issue. With styling the react-select to look nice within the filter row.
The issue is that I cannot find any other way to override the CSS rules for
.ReactTable .rt-th,.ReactTable .rt-td
which appears to control the row with all filter. This css has the rule of overflow:hidden; and changing it to overflow:visible; resolves my issue.
Hardcoding the changes in this file is of course not the "right way to do it" since I might get trouble elsewhere.
Things I've tried:
Passing styles={{overflow:visible}} to my filterComponent. This results in a strange style='Object object' and my style is not read.
Passing getProps:()=>{style:{overflow:'visible'}}. Have tried some other methods then getProps but with no luck.
Any other ideas or suggestions?
Solution
The prop getTheadFilterThProps was missing in the documentation. The property was found by searching within the react-table folder and check if there where any props that were missing in the documentation.
<ReactTable
getTheadFilterThProps={(state, rowInfo, column) => {
return {
style: {
overflow: 'visible',
}
};
}}
Ok, the answare was quite simple when finding the right props. I ended up searchin for getTheadFilterTrProps in the installation folder of react-table. Then I found that there were some more Props available.
I endend up adding
<React
getTheadFilterThProps={(state, rowInfo, column) => {
return {
style: {
overflow: 'visible',
}
};
}}
I'm embedding a PPT into my app, so I'd like a responsive iFrame. Can't get this working with the CSS based approached I've looked at here.
I'm thinking the best way would be just to make a simple component with height and width properties. Can I make these computed properties / observers that listen and update on the browser resize?
Or would I need to create a resize event and update the properties on the event?
A little code example would be much appreciated!
Thanks
I would recommend to use a CSS based approach, but you can use a component and use the resize event. Basically you would add the event listeners to window in your didInsertElement hook, and remove them in your willDestroyElement hook. Just use jQuery's .on() and .off().
onResize() {
// do whatever you want to calculate your values
set(this, 'my-frame-with', ...);
},
init() {
set(this, 'boundOnResize', get(this, 'onResize').bind(this));
},
didInsertElement() {
jQuery(window).on('resize', get(this, 'boundOnResize'));
},
willDestroyElement() {
jQuery(window).off('resize', get(this, 'boundOnResize'));
}
You can not use computed properties for this because they need to depend on observable properties. This will not work for plain JS properties, because this in an ember functionality. So you need to kind of wrap them like this.
Here is a Fiddle, to show my current state: (attempting onClick())
http://jsfiddle.net/D5N4f/7/
$('.associationLinks').click(function () {
alert("I've been clicked"); //test to see if click is working
//$(this).next().toggle();
$(this.content).toggle();
//$(this .content').css("display", "block");
});
here is a version of the working HOVER, that I need to convert to onClick:
http://jsfiddle.net/D5N4f/6/
This is working fine.. however.. on HOVER is just not practical for my use.. I need to change it to onClick..but have the same behavior.
Do I need to use jQuery for this? (I havent been able to get it to work)
the content I want displayed starts off as display:none..
I have tried to show(), toggle() and even .css("display", "block"); (maybe Im not targeting things correctly?)
the last part of this (since there will be MANY links set-up like this) is to close the previous 'SHOW' content.. when I click on a new link.. (ie: only having one content box displayed at a time vs. having several open at same time!)
Please use the fiddle example instead of just random code suggestions! Thanks!
I removed the following CSS:
/*.associationLinks:hover .content {
display:block;
}*/
I also use a .children() selector to get the content div to display, and I change it's CSS on a click.
Is this closer to what you want? Hiding the image is a bit tricker, and I have an idea for that but I'm not sure if you need it.