We Keep Coding

How do I group successive ID's to run the same function?

I've created several multi-state boxes which expand and collapse. After some research I managed to develop the code which responds to click to expand/collapse, but how can i shorten my code to prevent me manually changing each and every function?
// First Box
$w('#statebox8').onClick(() => {
$w('#statebox8').changeState("expand8")
})
$w('#statebox8').onClick(() => {
$w('#statebox8').changeState("collapse8")
})
// Second Box
$w('#statebox9').onClick(() => {
$w('#statebox9').changeState("expand9")
})
$w('#statebox9').onClick(() => {
$w('#statebox9').changeState("collapse9")
})
$w('#statebox10').onClick(() => {
$w('#statebox10').changeState("expand10")
})
As you can see from the code, it'll take me forever to change each statebox ID and each .changeState(ID). Is there a way to implement successive ID names or group ID's to use the same function?
(Apologise if this question is not well explained, or if the code is tedious. I'm not a coder and used youtube to get this current code. Any advise/help would be super useful. Thanks!)

How to click on each payment method in cypress using iteration?

My requirement is to click on each and every payment method (pay-safe, visa, bit-pay etc.)
and then validate using assert method by comparing URL.
Problem : Unable to click on element. I'm getting null value in variable. Tried using val() as well as html() method.
I tried below code.
//cy.get('.real-money--providers-list') = allPaymentMethods
depositFiat.allPaymentMethods().find('[src*="providers/logo"]').each(($element, index, $list) => {
var namePaymentProvider = $element.find('[alt*="safe"]').text()
cy.log(namePaymentProvider)
cy.wait(1000)
if(namePaymentProvider.includes('class')){
$element.find('.provider-content--choice').click()
//cy.get('.provider-content').invoke('removeAttr','src').click()
//depositFiat.secureCheckout().click()
//cy.back()
}
})
As cypress unable to handle child windows I tried to use invoke method but no luck.
Find HTML here

<div class="provider-img"><img alt="safecharge_paysafecard" class="style__Logo-a3ugi5-2 fAwRoV visible" src="https://static.xyz.com/1234123463/img/providers/logo_safecharge_paysafecard.svg"></div>
As per your HTML fiddle, I could see that for every payment provider you can use the css selector img[class*="style__Logo"]
For one payment method you can use:
cy.get('img[class*="style__Logo"]').eq(0).invoke('attr', 'src').should('contain', 'https: //static.xyz.com/')

You are finding an image, then trying to click on it.
Most likely the click-event sits on the button
Instead try to click on the button:
cy.get('.provider-content').each($element => {
cy.wrap($element).click()
// Assert something here
})
If the click action opens up a new tab/window, and you want to assert that it moved you do this new link, then Cypress does not support this directly.
Instead, you would either get the url that should be opened by the click and verify that.
Or
Stub the browser window so that the new tab opens up in the same tab you are currently in.

You can use Recursion and Jquery .removeAttr :
cy.get('[src*="providers/logo"]') //You need to make sure here is the correct selector that covers all methods here
.then(methods => {
checkPaymentMethod
function checkPaymentMethod(methodNumber = 0) {
if(methodNumber < methods.length) {
Cypress.$(methods[methodNumber]).removeAttr("target");
cy.get(methods[methodNumber])
.click()
.should('not.exist')
cy.url().should('eq', 'targetUrl')
cy.visit('yourPageUrl')
cy.url().should('eq', 'yourPageUrl')
methodNumber ++
checkPaymentMethod(methodNumber)
}
}
})

Check if element exist JEST tests

I'm trying to test if sgn.init() after call, generate and append element to DOM. However document.querySelector('.class') seems to always return null, even if I tried to add it manually in test function. Can you tell me what I'm doing wrong?
test('shoud be rendered', () => {
sgn.init();
const element = document.createElement('div');
element.classList.add('.element');
document.body.appendChild(element);
console.log(document.querySelector('.element'))
});

You have given the div a class of .element. Meaning that your class name contains a dot.
Try with classList.add('element')
The dot is only needed when searching, not creating.

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 the value of a pseudo-element with protractor

I'd like to verify the text content of a pseudo-element. The promise returned from using ptor.executeScript("window.getComputedStyle(jQuery('.my-class')[0], ':after').content").then(function(data){
console.log(arguments) // {'0':null}
});
I've also tried dropping that in the expectation, but I'd guess that fails for the same reason.
Since the CSS Declaration for this is pointing at one of the element's attributes anyway, should I just try to read that attribute?

executeScript will waits for you to return a value - so you'll need to do:
ptor.executeScript("return window.getComputedStyle(jQuery('.my-class')[0], ':after').content")
.then(function(data){ console.log(arguments)});

As an updated answer based up the one from our good friend Julie aka "Protractor Wizard."
I didn't have jQuery available to get my pseduo-element so I did this...
describe('#swPopover Component', () => {
it('should show the popover message when hovered', () => {
browser.actions().mouseMove(objectsPage.popover).perform();
browser.executeScript('return window.getComputedStyle(document.querySelector(".sw-popover"), ":after").content')
.then(data => expect(data).toBe('"I am the popover text"'));
});
});