We Keep Coding

Track changes within DOM element with MutationObserver Python

I found a website that pushes darts scores. Each time a new score is published, I would like to be notified.
import time
import selenium
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
URL = 'https://live.dartsdata.com/'
driver = webdriver.Chrome('/Users/hjam/downloads/chromedriver')
driver.get(URL)
time.sleep(1)
matches = driver.find_elements(By.XPATH, ".//*[#class='sr-match__wrapper srt-base-1 sr-ml-list__match']")
matches[0].click()
I want to retrieve the seconds until the match starts (there are no live matches atm, but idea is the same). I see that this data point is located in
seconds = driver.find_elements(By.XPATH, ".//*[#class='sr-lmt-0-ms-countdown__time srt-primary-7 srm-large']")[-1]
Now I want to use a MutationObserver to track the changes of this element. Each time the element changes, I want it to be printed. Using the example of docs I write the following
driver.execute_script("""
const targetNode = document.querySelector('#content1 > div.sr-lmt-plus__comp.srm-double.srm-isLmt > div > div > div > div > div > div > div.sr-lmt-wrap > div > div.sr-lmt-22-state > div.sr-bb.sr-lmt-matchstatus.sr-ltr.sr-lmt-matchstatus--small > div > div > div.sr-lmt-matchstatus__slider.sr-slider-flex__slider > div > div > div.sr-lmt-setsports-ms-matchstatus__row.sr-lmt-setsports-ms-matchstatus__countdown-wrapper > div > div.sr-lmt-0-ms-countdown__row > div:nth-child(4)');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
for(const mutation of mutationsList) {
console.log('Time is ticking');
}
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
""")
This yields no error, but nothing happens. It should print continuously 'time is ticking' in the Console right?
What am I doing wrong? And is there also a possibility that the output is printed in my python-script?

querySelectorAll is not live. It's returns representations of what the dom was and you're monitoring that snapshot. You need to use getElementsByClassName to hook onto a live element.

How come window.pageYOffset always 0 even when I scroll in the React App localhost?

I'm trying to change the state of a sub Component using the onScroll Event Handler but when I run it the state stays the same even with the condition placed all because of the window.pageYOffset staying at 0 hence always making it false.
Header.Frame = function HeaderFrame({ children })
{
console.log(window.pageYOffset)
const [scrolling,setScrolling]=useState(false);
return <Container onScroll={() => setScrolling(window.pageYOffset ===0 ? false:true)}>
{children}</Container>;
}

How to drag and drop in Cypress.io

I am testing Trello and trying to drag the last list and then drop it into a penultimate column, but the test is not working without ".wait". It would be really helpful if someone could advise about the potential issue here because I prefer to avoid using ".wait". There are no errors throwing, but still, the drag and drop is not happening without ".wait".
describe("Moving list", () => {
it("Waiting For Accept list should be moved from last column to the penultimate column", () => {
cy.get("#board")
.children(".js-list")
.should("have.length", 4)
.and("be.visible");
cy.get(":nth-child(4) > .list")
.should("be.visible")
.and("contain", "Waiting For Accept")
cy.get(":nth-child(4) > .list").trigger("mousedown", {
which: 1
});
cy.get("#board > div:nth-child(2) > .list")
.trigger("mousemove");
cy.get("#board > div:nth-child(3) > .list")
.trigger("mousemove")
.trigger("mouseup");
cy.get(":nth-child(3) > .list")
.should("contain", "Waiting For Accept");
});
});
See image
See image

That doesn't work out of the box, the logged issue for that is https://github.com/cypress-io/cypress/issues/845 . But in that same ticket is also a work around available using the native drag and drop API with draggable attribute on draggable elements:
Create a custom command
Cypress.Commands.add("dragTo", { prevSubject: "element" }, (subject, targetEl) => {
cy.wrap(subject).trigger("dragstart");
cy.get(targetEl).trigger("drop");
}
);
In the testscript you can use:
cy.get(".source").dragTo(".target");

You can use the Cypress drap and drop plugin
https://github.com/4teamwork/cypress-drag-drop

Finally I resolved this issue by using "cy.request"
https://docs.cypress.io/api/commands/request.html#Syntax
describe("Moving list", () => {
it("Waiting For Accept list should be moved from last column to the penultimate column", () => {
cy.request("https://trello.com/b/9lfzKIRu/trello-tests").then(response => {
expect(response.status).to.eq(200);
});
cy.get("#board > div:nth-child(4) > .list").trigger("mousedown", {
which: 1
});
cy.get("#board > div:nth-child(2) > .list").trigger("mousemove");
cy.get("#board > div:nth-child(3) > .list")
.trigger("mousemove")
.trigger("mouseup");
cy.get(":nth-child(3) > .list").should("contain", "Waiting For Accept");
});
});

Best solution is to use https://github.com/4teamwork/cypress-drag-drop it supports dragging to top and bottom too.
cy.get('#placeholder-3').drag('#placeholder-2', { position: 'top', })

I solved it by downgrading my drag and drop version from 2.1.0 to 1.8.0
https://www.npmjs.com/package/#4tw/cypress-drag-drop

Access element whose parent is hidden - cypress.io

The question is as given in the title, ie, to access element whose parent is hidden. The problem is that, as per the cypress.io docs :
An element is considered hidden if:
Its width or height is 0.
Its CSS property (or ancestors) is visibility: hidden.
Its CSS property (or ancestors) is display: none.
Its CSS property is position: fixed and it’s offscreen or covered up.
But the code that I am working with requires me to click on an element whose parent is hidden, while the element itself is visible.
So each time I try to click on the element, it throws up an error reading :
CypressError: Timed out retrying: expected
'< mdc-select-item#mdc-select-item-4.mdc-list-item>' to be 'visible'
This element '< mdc-select-item#mdc-select-item-4.mdc-list-item>' is
not visible because its parent
'< mdc-select-menu.mdc-simple-menu.mdc-select__menu>' has CSS property:
'display: none'
The element I am working with is a dropdown item, which is written in pug. The element is a component defined in angular-mdc-web, which uses the mdc-select for the dropdown menu and mdc-select-item for its elements (items) which is what I have to access.
A sample code of similar structure :
//pug
mdc-select(placeholder="installation type"
'[closeOnScroll]'="true")
mdc-select-item(value="false") ITEM1
mdc-select-item(value="true") ITEM2
In the above, ITEM1 is the element I have to access. This I do in cypress.io as follows :
//cypress.io
// click on the dropdown menu to show the dropdown (items)
cy.get("mdc-select").contains("installation type").click();
// try to access ITEM1
cy.get('mdc-select-item').contains("ITEM1").should('be.visible').click();
Have tried with {force:true} to force the item click, but no luck. Have tried to select the items using {enter} keypress on the parent mdc-select, but again no luck as it throws :
CypressError: cy.type() can only be called on textarea or :text. Your
subject is a: < mdc-select-label
class="mdc-select__selected-text">Select ...< /mdc-select-label>
Also tried using the select command, but its not possible because the Cypress engine is not able to identify the element as a select element (because its not, inner workings are different). It throws :
CypressError: cy.select() can only be called on a . Your
subject is a: < mdc-select-label
class="mdc-select__selected-text">Select ...< /mdc-select-label>
The problem is that the mdc-select-menu that is the parent for the mdc-select-item has a property of display:none by some internal computations upon opening of the drop-down items.
This property is overwritten to display:flex, but this does not help.
All out of ideas. This works in Selenium, but does not with cypress.io. Any clue what might be a possible hack for the situation other than shifting to other frameworks, or changing the UI code?

After much nashing-of-teeth, I think I have an answer.
I think the root cause is that mdc-select-item has display:flex, which allows it to exceed the bounds of it's parents (strictly speaking, this feels like the wrong application of display flex, if I remember the tutorial correctly, however...).
Cypress does a lot of parent checking when determining visibilty, see visibility.coffee,
## WARNING:
## developer beware. visibility is a sink hole
## that leads to sheer madness. you should
## avoid this file before its too late.
...
when $parent = parentHasDisplayNone($el.parent())
parentNode = $elements.stringify($parent, "short")
"This element '#{node}' is not visible because its parent '#{parentNode}' has CSS property: 'display: none'"
...
when $parent = parentHasNoOffsetWidthOrHeightAndOverflowHidden($el.parent())
parentNode = $elements.stringify($parent, "short")
width = elOffsetWidth($parent)
height = elOffsetHeight($parent)
"This element '#{node}' is not visible because its parent '#{parentNode}' has CSS property: 'overflow: hidden' and an effective width and height of: '#{width} x #{height}' pixels."
But, when using .should('be.visible'), we are stuck with parent properties failing child visibility check, even though we can actually see the child.
We need an alternate test.
The work-around
Ref jquery.js, this is one definition for visibility of the element itself (ignoring parent properties).
jQuery.expr.pseudos.visible = function( elem ) {
return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
}
so we might use that as the basis for an alternative.
describe('Testing select options', function() {
// Change this function if other criteria are required.
const isVisible = (elem) => !!(
elem.offsetWidth ||
elem.offsetHeight ||
elem.getClientRects().length
)
it('checks select option is visible', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
//cy.get('mdc-select-item').contains("ITEM1").should('be.visible') //this will fail
cy.get('mdc-select-item').contains("ITEM1").then (item1 => {
expect(isVisible(item1[0])).to.be.true
});
});
it('checks select option is not visible', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
cy.document().then(function(document) {
const item1 = document.querySelectorAll('mdc-select-item')[0]
item1.style.display = 'none'
cy.get('mdc-select-item').contains("ITEM1").then (item => {
expect(isVisible(item[0])).to.be.false
})
})
});
it('checks select option is clickable', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
//cy.get('mdc-select-item').contains("ITEM1").click() // this will fail
cy.get('mdc-select-item').contains("ITEM1").then (item1 => {
cy.get('mdc-select-item').contains("ITEM2").then (item2 => {
expect(isVisible(item2[0])).to.be.true //visible when list is first dropped
});
item1.click();
cy.wait(500)
cy.get('mdc-select-item').contains("ITEM2").then (item2 => {
expect(isVisible(item2[0])).to.be.false // not visible after item1 selected
});
});
})
Footnote - Use of 'then' (or 'each')
The way you normally use assertion in cypress is via command chains, which basically wraps the elements being tested and handles things like retry and waiting for DOM changes.
However, in this case we have a contradiction between the standard visibility assertion .should('be.visible') and the framework used to build the page, so we use then(fn) (ref) to get access to the unwrapped DOM. We can then apply our own version of the visibility test using stand jasmine expect syntax.
It turns out you can also use a function with .should(fn), this works as well
it('checks select option is visible - 2', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
cy.get('mdc-select-item').contains("ITEM1").should(item1 => {
expect(isVisible(item1[0])).to.be.true
});
});
Using should instead of then makes no difference in the visibility test, but note the should version can retry the function multiple times, so it can't be used with click test (for example).
From the docs,
What’s the difference between .then() and .should()/.and()?
Using .then() simply allows you to use the yielded subject in a callback function and should be used when you need to manipulate some values or do some actions.
When using a callback function with .should() or .and(), on the other hand, there is special logic to rerun the callback function until no assertions throw within it. You should be careful of side affects in a .should() or .and() callback function that you would not want performed multiple times.
You can also solve the problem by extending chai assertions, but the documentation for this isn't extensive, so potentially it's more work.

For convenience and reusability I had to mix the answer of Richard Matsen and Josef Biehler.
Define the command
// Access element whose parent is hidden
Cypress.Commands.add('isVisible', {
prevSubject: true
}, (subject) => {
const isVisible = (elem) => !!(
elem.offsetWidth ||
elem.offsetHeight ||
elem.getClientRects().length
)
expect(isVisible(subject[0])).to.be.true
})
You can now chain it from contains
describe('Testing select options', function() {
it('checks select option is visible', function() {
const doc = cy.visit('http://localhost:4200')
cy.get("mdc-select").contains("installation type").click()
//cy.get('mdc-select-item').contains("ITEM1").should('be.visible') // this will fail
cy.get('mdc-select-item').contains("ITEM1").isVisible()
});
});

I came across this topic but was not able to run your example. So I tried a bit and my final solution is this. maybe someone other also needs this. Please note that I use typescript.
First: Define a custom command
Cypress.Commands.add("isVisible", { prevSubject: true}, (p1: string) => {
cy.get(p1).should((jq: JQuery<HTMLElement>) => {
if (!jq || jq.length === 0) {
//assert.fail(); seems that we must not assetr.fail() otherwise cypress will exit immediately
return;
}
const elem: HTMLElement = jq[0];
const doc: HTMLElement = document.documentElement;
const pageLeft: number = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
const pageTop: number = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
let elementLeft: number;
let elementTop: number;
let elementHeight: number;
let elementWidth: number;
const length: number = elem.getClientRects().length;
if (length > 0) {
// TODO: select correct border box!!
elementLeft = elem.getClientRects()[length - 1].left;
elementTop = elem.getClientRects()[length - 1].top;
elementWidth = elem.getClientRects()[length - 1].width;
elementHeight = elem.getClientRects()[length - 1].height;
}
const val: boolean = !!(
elementHeight > 0 &&
elementWidth > 0 &&
elem.getClientRects().length > 0 &&
elementLeft >= pageLeft &&
elementLeft <= window.outerWidth &&
elementTop >= pageTop &&
elementTop <= window.outerHeight
);
assert.isTrue(val);
});
});
Please note the TODO. In my case I was targeting a button which has two border boxes. The first with height and width 0. So i must select the second one. Please adjust this to your needs.
Second: Use it
cy.wrap("#some_id_or_other_locator").isVisible();

I could solve it by calling scrollIntoView after getting an element. See this answer.

A related problem:
Cypress was unable to find a tab element because it had a style of display: none (even though it was visible on the page)
My workaround:
Cypress could target the tab by matching text and clicking
cy.get("[data-cy=parent-element]").contains("target text").click();

To expand a bit the answer of BTL, if anyone faced an error - Property 'isVisible' does not exist on type 'Chainable<JQuery<HTMLElement>> in Typescript, following is what I added at the top of commands.ts in cypress to get away with it -
declare global {
namespace Cypress {
interface Chainable {
isVisible;
}
}
}
And may be replacing expect(isVisible(subject[0])).to.be.true with assert.True(isVisible(subject[0])); if you see any chai assertion error with expect and don't want to import it - as in Josef Biehler answer..

I was facing the same error that parent is hidden so Cypress is unable to click the child element, I handled this by handling the visibility of parent from hidden to visible by this code
cy.get('div.MuiDrawer-root.MuiDrawer-docked').invoke('css', 'overflow-x', 'visible').should('have.css', 'overflow-x', 'visible')
Note: You can apply any css you want in the invoke function like I have

Remove the flex and try. If it is solved then use the flex standard way

ngAnimate parent vs child in AngularJS 1.2

In AngularJS 1.2, if I use a parent animation, the child animation doesn't work.
If I comment out app.animation('.parent', function () { .. }, then the child animation starts correctly.
How to get both parent and child animations working at the same time?
Plunker of my code
HTML:
<button ng-click="anim.toggleParent()">reveal parent</button>
<button ng-click="anim.toggleChild()">reveal child</button>
<div class="parent" ng-if="!anim.showParent">
<div class="child" ng-if="!anim.showChild">
</div>
</div>
JS:
app.animation('.parent', function () {
return {
// ...
};
});
// this doesn't work with parent animation =(
app.animation('.child', function () {
return {
// ...
};
});

Just insert ng-animate-children to the parent (Angular 1.2+).
<button ng-click="anim.toggleParent()">reveal parent</button>
<button ng-click="anim.toggleChild()">reveal child</button>
<div class="parent" ng-if="!anim.showParent" ng-animate-children>
<div class="child" ng-if="!anim.showChild">
</div>
</div>
Check the ngAnimate documentation:
Keep in mind that, by default, if an animation is running, any child elements cannot be animated until the parent element's animation has completed. This blocking feature can be overridden by placing the ng-animate-children attribute on a parent container tag.
<div class="slide-animation" ng-if="on" ng-animate-children>
<div class="fade-animation" ng-if="on">
<div class="explode-animation" ng-if="on">
...
</div>
</div>
</div>When the on expression value changes and an animation is triggered then each of the elements within will all animate without the block being applied to child elements.

Not sure whether this thread is closed. If so recommendation would be very helpful.
Facing the same issue here.
Angular animate has the below lines indicating that the child animations will not be triggered if parent has animation.
Not sure whether this is an issue or works as expected.
//skip the animation if animations are disabled, a parent is already being animated,
//the element is not currently attached to the document body or then completely close
//the animation if any matching animations are not found at all.
//NOTE: IE8 + IE9 should close properly (run closeAnimation()) in case a NO animation is not found.
if (animationsDisabled(element, parentElement) || matches.length === 0) {
domOperation();
closeAnimation();
return;
}
Have raised a thread in Angular google group referenced the issue back here.

Also not sure if this thread is closed, but you could always edit the angular-animate.js file. Function animationsDisabled is where angular looks for the parent element to see if it will allow the child to animate. At the top of this function I added a check to see if the parent element has a class of animation-override (can be whatever you define). This way you can override the default functionality when needed.
function animationsDisabled(element, parentElement) {
if (parentElement[0].classList.contains('animation-override')) return false;
if (rootAnimateState.disabled) return true;
if(isMatchingElement(element, $rootElement)) {
return rootAnimateState.disabled || rootAnimateState.running;
}
do {
//the element did not reach the root element which means that it
//is not apart of the DOM. Therefore there is no reason to do
//any animations on it
if(parentElement.length === 0) break;
var isRoot = isMatchingElement(parentElement, $rootElement);
var state = isRoot ? rootAnimateState : parentElement.data(NG_ANIMATE_STATE);
var result = state && (!!state.disabled || !!state.running);
if(isRoot || result) {
return result;
}
if(isRoot) return true;
}
while(parentElement = parentElement.parent());
return true;
}
}]);