We Keep Coding

How to test relative positioning of elements in cypress?

I am currently new to cypress and wants to test that Forgot Password should be below Login button in Facebook page? Is there a way to do that?
Is there a way to test relative positioning of elements in cypress?

I think you can use jQuery .position()
cy.get('#element1')
.then($el => $el.position().top) // get 1st top value
.then(top1 => {
cy.get('#element2')
.then($el => $el.position().top) // get 2nd top value
.then(top2 => {
expect(top1).to.be.gt(top2)
})
})
Notes
Cypress use jQuery to find elements. Chaining .then($el => ... exposes the jQuery object containing the element, so now you can apply other jQuery functions that are not part of the Cypress commands.
In fact, any other Javascript functions you want.
You can also make reusable functions
const getTop = ($el) = $el.position().top;
cy.get('#element1').then(getTop)
.then(top1 => {
cy.get('#element2').then(getTop)
.then(top2 => {
expect(top1).to.be.gt(top2)
})
})

You can use the cypress method next() to determine the element next to Log in button like this. next() gets the immediately following sibling of each DOM element within a set of DOM elements.
cy.get('div[type="submit"]').next().should('have.text', 'Forgot password?')

JavaScript: can't immediately select elements after creating them?

My script contains the following code that is causing me issues:
btn.addEventListener('click', ()=> {
if (!gamePlay) {
setup()
let word=document.querySelectorAll('box')
console.log(word)
btn.classList.toggle('hidden')
gamePlay=true
}
})
The reset of the code can be seen at this JS fiddle (don't mind the code commented out by the way): https://jsfiddle.net/apasric4/6k7anpvu/1/
After all the div elements are created in the function setup(), I am trying to select them by their class name (box) however the node list from the section is an empty node list (which is also shown in the console).
I am assuming the code is synchronous. I just can't seem to access the elements created by the call to setup().

You are able to access and query document elements immediately after they are created.
The issue here is that you selector syntax is incorrect; to select the elements with box class, prefix the selector with a ".":
btn.addEventListener('click', () => {
if (!gamePlay) {
setup();
let word = document.querySelectorAll('.box'); // Prefix .
console.log(word);
btn.classList.toggle('hidden');
gamePlay = true;
}
})

Getting javascript object back from DOM element

Say I create a javascript class as follows:
class DivClass {
constructor () {
this.div1 = document.createElement('div')
this.div1.id = 'div1'
}
}
Later I instantiate the class as follows:
var divObject = new DivClass()
parentDiv.appendChild(divObject.div1)
and the DIV eventually appears in the DOM.
If I was to locate the 'div1' element within the DOM, say via getElementById() for argument sake, is there anyway of getting back to the javascript 'divObject' responsible for its creation?
From what little I've learned about javascript, I kind of get the impression that the translation from javascript API to DOM is a one way trip and this just simply isn't possible.
Apologies in advance if I've gotten any of the terminology wrong, but I'm kind of new to javascript and still don't fully understand the DOM/API relationship.
Any advice would be greatly appreciated.

You can add a reference to the object to the DIV element.
class DivClass {
constructor () {
this.div1 = document.createElement('div')
this.div1.id = 'div1'
this.div1.divClass = this;
}
}
Then you can use document.getElementById("div1").divClass to get the object.

How do you retain the custom attributes for a paragraph in quilljs

We are currently using quilljs for a project. When we try to add html through the dangerouslyPasteHTML API from the Clipboard module, the custom attributes from the paragraphs are stripped.
For example:
On applying the following code :
quill.clipboard.dangerouslyPasteHTML("<p data-id='1'>Hello</p>");
The output obtained is
<p>Hello</p>
How do you retain the attribute 'data-id' in the output?
UPDATE 1:
I have managed to retain the custom attribute 'data-id' using the following code:
var Parchment = Quill.import('parchment');
var dataId = new Parchment.Attributor.Attribute('data-id', 'data-id', {
scope: Parchment.Scope.BLOCK
});
Quill.register(dataId);
However, on creating a new line (hitting the enter key), the same data-id is appearing in the new paragraph as well. How do I ensure that the new paragraph either has a custom data-id or does not contain the 'data-id' attribute?

I am pretty late to answer this, but for anyone encountering this issue, I have fixed it in the following way:
import Quill from 'quill';
const Parchment = Quill.import('parchment');
const IDAttribute = new Parchment.Attributor.Attribute('id-attribute', 'id', {
scope: Parchment.Scope.BLOCK,
});
Quill.register(
{
'attributors/attribute/id': IDAttribute,
},
true
);
Quill.register(
{
'formats/id': IDAttribute,
},
true
);
const Block = Quill.import('blots/block');
class BlockBlot extends Block {
constructor(domNode) {
super(domNode);
domNode.setAttribute('id', '');
this.cache = {};
}
}
BlockBlot.blotName = 'block';
export default BlockBlot;
So basically we want to make a custom Blot extending from the Block blot available and use it for the Block format execution. In the constructor we can do whatever we want to do with the attribute. In my case I am removing the id attribute which was being added to new block.

I would recommend adding event handling in the textChanged method. You could check the delta and see if the 'insert' also contains an 'attributes' field that would cause it to be modified. If that happens, you can trigger an updateContents that retains through the current selection index. Then delete the length of the insert, and reinsert without the attributes.

Can't access children of Konva Stage after cloning

I have a problem with konvajs. I have a konva Stage that I clone into a temporary Stage, so I can revert changes made by a user, when the user cancels.
The way I do this is, that I clone the existing Stage into a temporary one, destroy the children of the origin and after that I move the children of the temporary Stage back to the original and destroy the temporary Stage. The problem is, when I try to access the children now, for example via findOne('#id-of-child'), I get undefined, even though the children exist.
Here's what I've done so far:
clone: function()
{
var cloned_stage = this.stage.clone();
Array.each(this.stage.getChildren(), function(layer, lidx) {
if (layer.attrs.id) {
// setting the id to the ones, the children had before
cloned_stage.children[lidx].attrs.id = layer.attrs.id;
}
});
return cloned_stage;
},
restore: function(tmp_stage)
{
this.stage.destroyChildren();
Array.each(tmp_stage.getChildren(), function(layer, lidx) {
var tmp_layer = layer.clone();
tmp_layer.attrs.id = layer.attrs.id;
tmp_layer.moveTo(this.stage);
}.bind(this));
tmp_stage.destroy();
this.stage.draw();
},
Now when the user opens the toolbox to change something, the current stage is cloned with the "clone" function and when the user cancels his changes, the "restore" function is called with the cloned stage as parameter.
But after that when I try to do things like the following they do not work as expected.
some_child_of_the_stage.getLayer(); -> returns null
var edit_layer = this.stage.findOne('#edit-layer'); -> returns undefined
But the "some_child_of_the_stage" does exist and has a layer of course and the stage has a child with the id "edit-layer".
Me and my colleague are at our wit's end.
I appreciate any help and suggestions thank you.
Update:
A short fiddle showing the problem via console.log:
fiddle

It is better not to touch attrs property of a node and use public getters and setters.
Konva has special logic for storing id property. Selector by id #edit-layer may not work because of direct access to attrs id.
You can use name property fo that case.
https://jsfiddle.net/s36hepvg/12/