Description:
Good afternoon community, could you help me know how to click a button in a Power BI interface? I was trying this but it doesn't work for me
await page.ClickAsync(".themableBackgroundColor");
Url Power Bi:
https://app.powerbi.com/view?r=eyJrIjoiNGE3Mjg4OWMtZTFhYi00MDUyLTllNzAtNDJmOGE4NjY2MzMwIiwidCI6IjhhNDc1YTdmLThlOGYtNDliMi1iMDRkLTZlY2IwNTkzYzYzMyJ9
Image of Power Bi buttons:
Image of Power Bi buttons
Example code Html
<button type="button" class="themableBackgroundColor" style="width: 40px; height: 40px; overflow: hidden; position: relative; display: block; background-color: transparent; cursor: pointer;">
<span class="button-text" style="text-align: right; max-width: 32px; pointer-events: none; color: rgb(102, 102, 102); font-family: "Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif; font-size: 13.3333px; position: absolute; right: 4px; top: 20px;"></span>
<div class="button-icon"><svg viewBox="0 0 22.59 32" width="32" height="32" style="fill: none; pointer-events: none; position: absolute; left: 4px; top: 4px;"><polygon points="20.04 29.25 11.21 25.43 2.37 29.25 2.37 2.5 20.04 2.5 20.04 29.25" style="vector-effect: non-scaling-stroke; stroke-width: 3px; stroke: rgb(102, 102, 102); stroke-opacity: 1;"></polygon></svg></div>
<div class="button-outline" style="pointer-events: none; top: 0px; left: 0px; position: absolute; width: 40px; height: 40px; border: none;"></div>
</button>
Just use this function to click the button via script:
let btn = document.querySelector(".themableBackgroundColor")
btn.addEventListener("click", () => console.log("Button Clicked!"))
btn.click();
Related
can anyone help me? in below that is my code, in that label focus not working when the phone number input field without required. if am using [required] in css its working when i click the input the label going top but its again returns down to the initial value and the label overlapping the given input
Document
#welcome-form {
flex-direction: column;
position: absolute;
height: 220px;
width: 100%;
background-color: white;
border-top-left-radius: 200px 102px;
bottom: 48px;
}
.welcome-form-item {
position: relative;
border-bottom: 2px solid #adadad;
margin: 20px 0;
width: 80%;
margin-left: 50px;
width: 80%;
}
.welcome-form-item-textbox {
width: 100%;
padding: 0 5px;
height: 40px;
font-size: 16px;
border: none;
background: none;
outline: none;
}
.welcome-form-item label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 16px;
pointer-events: none;
transition: .5s;
}
.welcome-form-item span::before {
content: '';
background-color: #303041;
position: absolute;
top: 40px;
left: 0;
width: 0%;
height: 2px;
transition: .5s;
}
.welcome-form-item-textbox:focus\~label,
.welcome-form-item-textbox\[required\]:valid\~label {
top: -5px;
color: #adadad;
}
.welcome-form-item-textbox:focus\~span::before,
.welcome-form-item-textbox\[required\]:valid\~span::before {
width: 100%;
}
#welcome-form-item-button {
color: #ffffff;
vertical-align: bottom;
border: 0;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 2px 10px 0 rgb(0 0 0 / 10%);
font-weight: bold;
font-size: .75rem;
line-height: 2;
border-radius: 2px 60px;
display: block;
width: 80%;
cursor: pointer;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
font-size: 19px;
margin-left: 50px;
margin-top: 20px;
text-spacing: .5;
}
#welcome-form-item-button:hover {
background-color: #303041;
box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 10%);
}
<div class="welcome-form-item">
<input class="welcome-form-item-textbox" type="text" id="name" name="name" required>
<span></span>
<label for="name">Name</label>
</div>
<div class="welcome-form-item">
<input class="welcome-form-item-textbox" type="text" id="phone_number" name="phone_number">
<span></span>
<label for="phone_number">Phone Number</label>
</div>
<div>
<button id="welcome-form-item-button" type="button">Start
Conversation</button>
</div>
</form>
`this is my output`
enter image description here
I am using HTML5 and CSS3 to make my website.
My current roadblock: I created a drop down menu on one of the tabs on my Nav Bar, but it goes behind the background image used as a banner. I have tried everything possible and I haven't had any luck.
Any ideas would be greatly appreciated! Thanks.
Here's the Nav Bar HTML Code:
<p>Abelia </p>
<ul>
<li>Home</li>
<li><a href="#">Services<i class="
fas fs-caret-down"></i></a>
<ul>
<li>Electricity</li>
<li>Water</li>
<li>Housing</li>
</ul>
</li>
<li>About Us
<ul>
<li>Vison</li>
<li>Projects</li>
<li>Team</li>
</ul>
</li>
<li><a>Contact Us</a></li>
</ul>
<div class="banner-area">
<h2>Welcome To Abelia Group</h2>
</div>
This is nav bar CSS code
.menu_bar{
background-color: #c0392b;
height: 80px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5%;
position: fixed;
}
.logo a{
font-size: 30px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: beige;
letter-spacing: 4px;
}
.menu_bar ul{
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.menu_bar ul li{
padding: 5px 15px;
position: relative;
}
.menu_bar ul li a{
text-decoration: none;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
letter-spacing: 2px;
font-size: 20px;
color: beige;
transition:all 0.2s ;
}
.menu_bar ul li a:hover{
color: black;
}
.fs-caret-down{
height: 2px;
width: 1px;
color: rgb(255, 255, 255);
}
.dropdown_menu{
display: none;
}
.menu_bar ul li:hover .dropdown_menu{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu ul li{
width: 150px;
padding: 10px;
}
.dropdown_menu2{
display: none;
}
.menu_bar ul li:hover .dropdown_menu2{
display: block;
position: absolute;
left: 0;
background-color: #c0392b;
}
.menu_bar ul li:hover .dropdown_menu2 ul{
display: block;
margin: 10px;
}
.menu_bar ul li:hover .dropdown_menu2 ul li{
width: 150px;
padding: 10px;
}
/*content*/
.banner-area{
background-image: url(image/mypic.jpg);
background-size: cover;
background-position: center;
top: 80px;
height: 680px;
width: 100%;
position: fixed;
}
.banner-area:after{
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 800px;
background: rgb(21, 21, 29);
opacity:.7 ;
z-index: -1;
}
I Need Help.
I want to create a hero-image, but I'm having trouble positioning the text.
I want it to look like this:
enter image description here
When I do it my way, then I have a problem with RWD positioning later.
Maybe it is possible to do it somehow simpler?
<header>
<div class="hero-img">
<div class="hero-shadow"></div>
<div class="hero-text">
<h1>Zięba</h1>
<p>gallery</p>
</div>
<i class="fas fa-chevron-down"></i>
</header>
header {
.hero-img {
position: relative;
height: 100vh;
width: 100vw;
background-image: url('../img/Kapiaca-sie-small.jpg');
background-position: center;
background-size: cover;
background-attachment: fixed;
z-index: -2;
overflow: hidden;
.fa-chevron-down {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 95%;
color: $white-color;
font-size: 35px;
}
}
.hero-text {
position: absolute;
transform: translate(1430px, -50px);
height: 100%;
z-index: 5;
h1 {
color: $black-color;
font-size: 30rem;
font-family: 'Disclaimer', sans-serif;
}
h1::before {
content: 'Sławomir';
position: absolute;
display: inline-block;
transform: rotate(270deg);
top: 312px;
right: 180px;
font-size: 5rem;
font-family: 'Roboto', sans-serif;
color: $green-color;
}
p { position: absolute;
top: 540px;
right: 10px;
text-transform: uppercase;
color: $brown-color;
font-size: 1.6rem;
}
}
I am sending link to CodePen:https://codepen.io/Ewelaa/pen/MWoVwvY
header .hero-text {
position: absolute;
right:40px;
height: 100%;
z-index: 5;
}
Just use Right Property to fix position.
how can I send a text in an HTML block and inline elements?
<gr_block p="0,7" style="display: inline;">My text</gr_block>
this also is connected to it
<span data-text="true">My text</span>
this is the messenger of facebook I'm trying to send a message via Watir. any ideas?
Messenger
update:
<div class="_5rp7 _5rp8" spellcheck="false">
<grammarly-ghost spellcheck="false">
<div data-id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm="gramm" data-gramm_editor="true" class="gr_ver_2" gramm="true" contenteditable="true" style="position: absolute; color: transparent; overflow: hidden; white-space: pre-wrap; border-radius: 0px; box-sizing: content-box; height: 19px; width: 307.951px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; z-index: 0; border-width: 0px; border-style: none; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); top: 0px; left: 0px;" width="307.951416015625">
<span style="display: inline-block; font: 400 14px/17.92px "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; color: transparent; overflow: hidden; float: initial; clear: none; box-sizing: border-box; vertical-align: baseline; white-space: pre-wrap; width: 100%; margin: 0px; padding: 0px; border: 0px; letter-spacing: normal; text-shadow: none; height: 19px;">
<gr_block p="0,16" style="display: inline;">My text</gr_block>
</span><br></div>
</grammarly-ghost>
<div class="_5rpb"><div aria-autocomplete="list" aria-controls="js_8" aria-describedby="js_1" aria-expanded="false" aria-label="Type a message..." class="notranslate _5rpu" contenteditable="true" role="combobox" spellcheck="false" tabindex="0" style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word; z-index: auto; position: relative; line-height: 17.92px; font-size: 14px; transition: none; background: transparent !important;" data-gramm="true" data-txt_gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_editor="true"><div data-contents="true"><div class="" data-block="true" data-editor="fenr1" data-offset-key="8b6hl-0-0"><div data-offset-key="8b6hl-0-0" class="_1mf _1mj"><span data-offset-key="8b6hl-0-0"><span data-text="true">My text</span></span></div></div></div></div><grammarly-btn><div class="_1BN1N Kzi1t BD-0J _7_mnr MoE_1 _2DJZN" style="z-index: 2; transform: translate(294.951px, 5px);"><div class="_1HjH7"><div title="Protected by Grammarly" class="_3qe6h"> </div></div></div>
</grammarly-btn></div>
</div>
Second element
<div aria-autocomplete="list" aria-controls="js_8" aria-describedby="js_1" aria-expanded="false" aria-label="Type a message..." class="notranslate _5rpu" contenteditable="true" role="combobox" spellcheck="false" tabindex="0" style="outline: none; user-select: text; white-space: pre-wrap; word-wrap: break-word; z-index: auto; position: relative; line-height: 17.92px; font-size: 14px; transition: none; background: transparent !important;" data-gramm="true" data-txt_gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_id="d0205e5d-3e42-7f18-fa89-538e297341b2" data-gramm_editor="true">
My text
What you are asking is not possible by webdriver because webdriver doesn't change the content of the page, but it's possible by Java script.
Write the below code
element=b.element(xpath: "//span[text()='My text']")
b.execute_script("arguments[0].innerText='Your Text here'",element)
Your Text here will appear in the place of My text.
I have tried everything, including "text-decoration: none;" and making sure all padding is removed. Should be a pretty basic and elemental procedure but nothing works.
Yes, I have read all I can find here and tried it or looked elsewhere on the net for a solution. Nothing is working.
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="site.css"/>
</head>
<style>
#main-nav {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 100%;
height: 30px;
margin: auto;
padding: 0;
text-decoration: none;
background-color: #D6D5D6;
list-style-type: none;
text-align: center;
}
.nav-list {
text-decoration: none;
text-align: center;
list-style: none;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
width: 1000px;
margin-: auto;
padding: 0;
}
.nav-list > li {
margin: 0;
float: left;
width: 200px;
height: 30px;
position: relative;
line-height: 30px;
}
.nav-list > li > a {
width: 200px;
height: 30px;
text-align: center;
padding-top: 12px;
list-style-image: none;
}
.nav-list > li > a:hover {
background-color: #FFF;
}
#dropdown {
position: relative;
top: 30px;
width: 100px;
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
list-style-image: none;
list-style-type: none;
color: #F00;
}
.dropdown: li{
background-color:#697;
position:relaive;
width:200px;
height:30px;
text-decoration: none;
}
.dropdown: li a {
color: #ddd;
text-decoration:none;
position: absolute;
width:200px;
height:30px;
padding: 10px 0 0 10px;
box-sizing: border-box;
}
.dropdown: li a:hover {
background-color: #CCC;
}
body {
margin-left: 0px;
margin-top: 0px;
}
#transbar {
position: absolute;
z-index: -1;
width: 1000px;
left: 0px;
top: 0px;
}
#wrap {
width: 1000px;
top: 668px;
position: absolute;
margin-right: auto;
margin-left: auto;
}
#textbox {
font-family: Verdana, Geneva, sans-serif;
font-size: 13px;
font-style: normal;
height: 575px;
width: 1000px;
position: absolute;
z-index: -1;
margin-top: 80px;
margin-right: 50px;
margin-bottom: 50px;
margin-left: 50px;
}
</style>
<div id="wrapper">
<body>
<nav class="main-nav">
<ul class="nav-list">
<li>About
<ul style="list-style: none;" class="dropdown">
li>The Film</li>
<li>The Park</li>
</ul>
</li>
<li>Updates
<ul style="list-style: none;" "dropdown">
<li>Slideshow<li>
</ul>
</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Add this to your CSS to remove underline effect for <li> links:
a:link {
text-decoration: none;
}
As for displaying <li> elements in the center of the page I've provided a simplified version of your code that centers each <li>.
HTML:
<ul>
<li>About</li>
<li>The Film</li>
<li>The Park</li>
<li>Updates</li>
<li>Slideshow</li>
<li>Trailers</li>
<li>Support</li>
<li>Contact</li>
</ul>
CSS:
a:link {
text-decoration: none;
}
ul {
text-align: center;
list-style-type: none;
}
ul li {
display: inline-block;
}
NOTE: you may want to adapt this to your current code, next time you ask a question like this probably best to post a link to a jsfiddle example of your code.
I got it to work. Fooling around with the width in the CSS "Box" attribute did the trick. I am using Dreamweaver as my text editor, btw. A width of 123px added to the ul CSS script did it for the first listed column. For the ul li column I had to mess with that as well. A measure of 68px on the width centered that. I don't know why this works, and as you tell I'm a novice at this.