<div class="MuiGrid-root jss45 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-3 MuiGrid-grid-md-3 MuiGrid-grid-lg-3 MuiGrid-grid-xl-3">
<h4 class="MuiTypography-root jss48 MuiTypography-h4">Decks</h4>
<button class="MuiButtonBase-root MuiFab-root jss47 MuiFab-sizeSmall MuiFab-primary" tabindex="0" type="button" aria-label="add" title="Add">
<span class="MuiFab-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z">
</path>
</svg>
</span>
<span class="MuiTouchRipple-root">
</span>
</button>
</div>
Java Scriprt:
describe('Login', function () {
it('Login', function () {
browser.waitForAngularEnabled(false);// since it is React JS application
browser.get('http............');// cannot access this. since it requires vpn
element(by.css('input[type="text"]')).sendKeys('Username');
element(by.css('input[type="password"]')).sendKeys('Password');
element(by.buttonText('Login')).click();
element(by.css('svg[class="MuiSvgIcon-root"]')).click();
});
});
In the above code, I wanted to click on the add button. I tried with all locators. But I am getting element not found error. Can anyone please help me in resolving this.
Related
I am new to the whole coding topic. For my first "big" project I want to build a simple website with some functionality. I tried to implement an Image slider with Tailwind and JS. But the Code won't work. Thank you for all your help in advance <3screen
HTML and Tailwind:
<section>
<div>
<div class="relativ h-50 relative">
<ul id="slider">
<li class="relativ scale-50">
<img class="h-full w-full object-fill" src="./img/test.png" alt="" />
</li>
<li class="relativ hidden h-[50vh]">
<img class="h-full w-full object-fill" src="./img/logo1.png" alt="" />
</li>
<li class="relativ hidden h-[50vh]">
<img class="h-full w-full object-fill" src="./img/test.png" alt="" />
</li>
</ul>
<div class="absolute top-1/2 -translate-y-1/2 w-full px-5">
<div class="my-auto flex w-full justify-between ">
<button onclick="prev()" class="rounded-full bg-slate-500 bg-opacity-80 p-3 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button>
<button onclick="next()" class="rounded-full bg-slate-500 bg-opacity-80 p-3 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
JS:
// Image slider
currentSlideId = 1;
sliderElement = document.getElementById('slider');
totalSlides = sliderElement.childElementCount;
function next (){
if(totalSlides<currentSlideId){
currentSlideId++;
showSlide();
}
}
function prev(){
if(currentSlideId > 1){
currentSlideId--;
showSlide();
}
}
function showSlide(){
slides = getElementById('slider').getElementsByTagName('li');
for (let index = 0; index < totalSlides; i++){
const element = slide[index];
if(currentSlideId===index+1){
element.classList.remove('hidden')
}else{
element.classList.add('hidden')
}
}
}
I tried to edit my code but it won't work :/
First, welcome to stack overflow.
I think the problem is in the showSlide function inside the for loop, wherein the 'element' variable you wrote:
slide[index]
But I think it should be:
slides[index]
Because there is no variable in that name.
And also like #BestCoderBoy commended, it's always good to initialize a variable before using it, and it looks like you're using getElementByID without the document.
I face the problem of opening the same modal window with different buttons. Unfortunately, my knowledge is not enough to solve the problem correctly. I made several scripts for each button, it works like this, but it's not a solution, there should be one code, but how exactly to write it?
An example of the code for 1 button below, I will be grateful for help in supplementing the opening code for the other 2 buttons.
(() => {
const refs = {
openBuyModalBtn: document.querySelector("[data-buy-modal-open]"), <sup>open button</sup>
closeBuyModalBtn: document.querySelector("[data-buy-modal-close]"), <sup>close button</sup>
buyModal: document.querySelector("[data-buy-modal]"),
body: document.querySelector("body"),
};
refs.openBuyModalBtn.addEventListener("click", toggleModal);
refs.closeBuyModalBtn.addEventListener("click", toggleModal);
function toggleModal() {
refs.buyModal.classList.toggle("is-hidden"); (.is-hidden {opacity: 0; pointer-events: none; transform: scaleX(0);} )
refs.body.classList.toggle("no-scroll");
}
})();
<button class="buy-now__button" data-buy-modal-2-open type="button">Buy now
<svg width="32" height="32" class="buy-now__icon">
<use href="./images/svg/icons.svg#icon-ep-arrow"></use>
</svg>
</button>
<button class="header-nav__button" data-buy-modal-open type="button">Buy now
<svg width="32" height="32" class="header-nav__icon">
<use href="./images/svg/icons.svg#icon-ep-arrow"></use>
</svg>
</button>
<div class="buy-modal__container is-hidden" data-buy-modal>
<div class="buy-modal">
<button class="buy-modal__button buy-modal__button--close" type="button" data-buy-modal-close>
<svg width="20" height="20">
<use href="./images/svg/icons.svg#icon-close"></use>
</svg>
</button>
<h2 class="buy-modal__title">Buy now</h2>
<ul class="buy-modal__picture-list"></ul>
</div>
</div>
I want to create alerts that can be hidden, but when I hide one, they are all hidden at the same time.
This is the code I have, where I need to create the "click" event to hide only the newly created button but hide all of them at the same time:
const newAlert = $("#mainBodyContainer").append(`
<div class="alert alert-info shadow-lg p-2 mt-2">
<p>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
class="stroke-current flex-shrink-0 w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>a</span>
</p>
<strong class="text-xl align-center cursor-pointer alert-del">×</strong>
</div>
`);
const deleteAlertButton = newAlert.find(".alert-del")
deleteAlertButton.on("click", () => {
deleteAlertButton.parent().addClass("hidden");
});
Docs jQuery find: "Get the descendants of each element in the current set of matched elements"
Keyword: elementS.
You don't have a unique selector. Every time you create a new button, your event handler returns ALL .alert-del classes it finds inside #mainBodyContainer. Including the ones already in there.
To solve the issue, make sure each button can be uniquely selected:
let alerts = 1;
function createAlert()
{
const newAlert = $("#mainBodyContainer").append(`
<div class="alert alert-info shadow-lg p-2 mt-2">
<p>
<span>Button ${alerts}</span>
</p>
<strong id="alert_${alerts}" class="text-xl align-center cursor-pointer alert-del">×</strong>
</div>
`);
const deleteAlertButton = $("#alert_"+alerts);
deleteAlertButton.on("click", () => {
deleteAlertButton.parent().addClass("hidden");
});
alerts++;
}
createAlert();
createAlert();
createAlert();
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mainBodyContainer"></div>
Is there a way I can modify the <span> tag that is generated by using the Checkbox component from the material-ui framework?
Basically, I'm looking for a way to change:
<span class="MuiButtonBase-root-29 MuiIconButton-root-226 MuiSwitchBase-root-277 MuiCheckbox-root-271 Checkbox-root-265 MuiCheckbox-colorSecondary-276">
<span class="MuiIconButton-label-231">
<svg class="MuiSvgIcon-root-168" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</svg>
<input class="MuiSwitchBase-input-280" name="Chk" type="checkbox" data-indeterminate="false" value="">
</span>
<span class="MuiTouchRipple-root-64"></span>
</span>
to (the change is in the first <span> tag)
<span class="MuiButtonBase-root-29 MuiIconButton-root-226 MuiSwitchBase-root-277 MuiCheckbox-root-271 Checkbox-root-265 MuiCheckbox-colorSecondary-276" tabindex=0>
<span class="MuiIconButton-label-231">
<svg class="MuiSvgIcon-root-168" focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
<path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
</svg>
<input class="MuiSwitchBase-input-280" name="Chk" type="checkbox" data-indeterminate="false" value="">
</span>
<span class="MuiTouchRipple-root-64"></span>
</span>
Thanks for your help!
The documentation for Checkbox states that "Any other properties supplied will be spread to the root element (native element)", so you can just give the component a prop tabindex with the value 0:
import Checkbox from '#material-ui/core/Checkbox';
function MyCheckbox() {
return <Checkbox tabindex={0} />;
}
I got a component with two styled buttons and one same event
"mouseEnter".
<template>
<div>
<a
class="button red"
href="/about"
#mouseover="mouseEnter">
<svg viewBox="0 0 180 60">
<path d="..."/>
</svg>
<span class="buttonSpan">About</span>
</a>
<a
class="button green"
href="/contact"
#mouseover="mouseEnter">
<svg viewBox="0 0 180 60">
<path d="..."/>
</svg>
<span class="buttonSpan">Contact</span>
</a>
</div
</template>
When the event triggers I want to do something with the path and the span of the button that is hovered.
I'm trying to reference them with event.target but for the span I get null, and for the path everything is working good.
methods: {
buttonEnter(event) {
const buttonPath = event.target.querySelector('path')
const buttonSpan = event.target.querySelector('span')
...
}
How should i reference the span ? Is there any other way I can do it ?
the event target will bubble up starting from the children of the node that you attached your listener to. Use event.currentTarget