how to find subsequent tags in selenium for a particular tag - selenium

I'm trying to click on 'Recommended' input tag of a 'Samsung' label. Please find the appropriate HTML code below.
`
<div class="card-wrapper">
<a class="card-focus has-shadow" href="/app/72292">
<div class="card-container">
<div class="card-logo">
<section class="card-info">
<div class="card-name">Samsung Push Service</div>
<div class="card-publisher hidden-xs">Samsung Push Service</div>
</section>
<div class="card-rating">
</div>
</a>
</div>
<div class="hidden-xs">
<div>
<div class="app-management">
<div class="checkbox ">
<div class="checkbox ">
<label>
<input id="Recommended-72292" class="" aria-disabled="false" value="Recommended" type="checkbox"/>
<span class="cr"/>
<span class="layer-label">Recommended</span>
</label>
</div>
<a href="/mdm">
</div>
</div>
</div>
</div>`
How to achieve this?

Your input seems to be a checkbox, not a button. Try changing its checked value instead of triggering a click:
document.getElementById('Recommended-72292').checked = true;

In selenium, click() method would do your job.
if ( !driver.findElement(By.id("Recommended-72292")).isSelected() )
{
driver.findElement(By.id("Recommended-72292")).click();
}

try following:
driver.findElement(By.cssSelector("div.checkbox input#Recommended-72292")).click();

Related

Stale element exception under shadow dom

I'm facing a problem with a stale element under the shadow DOM, scenario below:
hover to the video and the dock is shown and vice versa
HTML Dom changes from not hovering to hovering and vice versa:
The below html is for not hovering.
<div class="base overlay hidden" style="position:absolute;top:80px;left:139px;height:387px;width:516px;"><div class="downloads"><div class="hide-btn" id="hide-widget">
</div>
<ul class="main main-panel">
<li class="panel">
<span class="select" id="preferred-select" data-selected-value="High">Preferred quality: High</span>
<a class="download-btn" id="download-main" title="DOWNLOAD">
<span>DOWNLOAD</span>
</a>
</li>
<li class="message-panel">
<a class="message" id="showhide-all"></a>
</li>
</ul>
<!-- Progress box for content script -->
<div class="tooltip-box">
<div class="play-and-progress-box" hidden="">
<div class="progress-box">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="percent"></div>
</div>
<button class="play-now-btn" id="play-now">
<span class="play-now-play-icon">▶</span> Play now
</button>
</div>
<div class="tooltip bleft">
Click to <b>Play now</b> to watch downloading video now!
<form action="" class="not-show">
<input type="checkbox" name="vehicle" value="abc" id="play-now-not-show-check">
<label for="play-now-not-show-check">Do not show again</label>
</form>
<span class="closebtn" id="close-play-now-tooltip">+</span>
</div>
</div>
<div id="downloads"></div>
<div class="mobile-btn">
<div id="open-mobile">
<div class="tooltip">Mobile</div>
</div>
</div>
<div id="open-pip" class="pip-btn">
<div class="tooltip">Pin</div>
</div>
<div id="switch-light" class="light-btn">
<div class="tooltip">Lights off</div>
</div>
<div id="skipping_ads" class="skipping-ads-btn" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDBDMTIuNCAwIDEyIDAuNCAxMiAxVjEzQzEyIDEzLjYgMTIuNCAxNCAxMyAxNEMxMy42IDE0IDE0IDEzLjYgMTQgMTNWMUMxNCAwLjQgMTMuNiAwIDEzIDBaIiBmaWxsPSIjREVERERBIi8+CjxwYXRoIGQ9Ik0zLjM5OTk5IDAuNTk5OTk4QzIuOTk5OTkgMC4xOTk5OTggMi41IDAgMiAwQzEuNyAwIDEuNTAwMDEgNy41OTk1OWUtMDcgMS4yMDAwMSAwLjIwMDAwMUMwLjUwMDAxMiAwLjUwMDAwMSAwIDEuMiAwIDJWMTJDMCAxMi44IDAuNTAwMDEyIDEzLjUgMS4yMDAwMSAxMy44QzEuNDAwMDEgMTMuOSAxLjcgMTQgMiAxNEMyLjUgMTQgMi45OTk5OSAxMy44IDMuMzk5OTkgMTMuNEw4LjM5OTk5IDguNEM5LjE5OTk5IDcuNiA5LjE5OTk5IDYuNCA4LjM5OTk5IDUuNkwzLjM5OTk5IDAuNTk5OTk4WiIgZmlsbD0iI0RFREREQSIvPgo8L3N2Zz4K");">
<div class="tooltip">Disable Auto skip ads</div>
</div>
<div class="skipping-ads-tooltip">
<div class="skipping-ads-tooltip-wand-block">
<div class="skipping-ads-tooltip-wand"></div>
</div>
<div class="skipping-ads-tooltip-block">
<div class="skipping-ads-tooltip-title">Auto skip ads</div>
<div class="skipping-ads-tooltip-content">Cốc Cốc can skip video ads automatically for you. Do you want to enable it now?</div>
<div class="skipping-ads-tooltip-notice">This is not an ad blocker, it just automates the process of clicking on the "Skip Ad" button</div>
</div>
<div class="skipping-ads-tooltip-btn">
<div id="skipping-ads-btn-cancel" class="skipping-ads-tooltip-btn-cancel">
Cancel
</div>
<div id="skipping-ads-btn-ok" class="skipping-ads-tooltip-btn-ok">
Yes, enable
</div>
</div>
</div>
<div class="mobile-box hidden">
<div class="mobile-content-box">
<div class="mobile-content-column-box">
<div class="mobile-content-column">
<div class="mobile-content mobile-header first">
<span class="mobile-instruction-text">
<span class="step-number">1</span>
Open Cốc Cốc Mobile
</span>
</div>
<div class="mobile-content mobile-instructions">
<img src="" alt="Instruction" class="instruction-image">
</div>
</div>
<div class="mobile-content-column">
<div class="mobile-content mobile-header second">
<span class="mobile-instruction-text">
<span class="step-number">2</span>
Scan QR code
</span>
</div>
<div class="mobile-switch-box">
<div class="switch">
<div class="switch-field">
<input type="radio" id="switch-video" name="send-type" value="video" checked="">
<label for="switch-video">Video</label>
<input type="radio" id="switch-audio" name="send-type" value="audio">
<label for="switch-audio">Audio</label>
</div>
</div>
</div>
<div class="mobile-content mobile-qrcode">
<div class="qrcode loading"></div>
</div>
</div>
</div>
<div class="mobile-content mobile-footer">
<span class="footer-text"> Don't have Cốc Cốc Browser on mobile? </span>
<div class="download-web-stores">
<div class="stores google-play" id="google-play">
</div>
<div class="stores app-store" id="app-store">
</div>
</div>
</div>
</div>
</div></div></div>
After hovered, the change is:
<div class="base overlay" style="position:absolute;top:80px;left:139px;height:387px;width:516px;"><div class="downloads"><div class="hide-btn" id="hide-widget">
</div>
<ul class="main main-panel">
<li class="panel">
<span class="select" id="preferred-select" data-selected-value="High">Preferred quality: High</span>
<a class="download-btn" id="download-main" title="DOWNLOAD">
<span>DOWNLOAD</span>
</a>
</li>
<li class="message-panel">
<a class="message" id="showhide-all"></a>
</li>
</ul>
<!-- Progress box for content script -->
<div class="tooltip-box">
<div class="play-and-progress-box" hidden="">
<div class="progress-box">
<div class="progress-bar">
<div class="bar"></div>
</div>
<div class="percent"></div>
</div>
<button class="play-now-btn" id="play-now">
<span class="play-now-play-icon">▶</span> Play now
</button>
</div>
<div class="tooltip bleft">
Click to <b>Play now</b> to watch downloading video now!
<form action="" class="not-show">
<input type="checkbox" name="vehicle" value="abc" id="play-now-not-show-check">
<label for="play-now-not-show-check">Do not show again</label>
</form>
<span class="closebtn" id="close-play-now-tooltip">+</span>
</div>
</div>
<div id="downloads"></div>
<div class="mobile-btn">
<div id="open-mobile">
<div class="tooltip">Mobile</div>
</div>
</div>
<div id="open-pip" class="pip-btn">
<div class="tooltip">Pin</div>
</div>
<div id="switch-light" class="light-btn">
<div class="tooltip">Lights off</div>
</div>
<div id="skipping_ads" class="skipping-ads-btn" style="background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzIDBDMTIuNCAwIDEyIDAuNCAxMiAxVjEzQzEyIDEzLjYgMTIuNCAxNCAxMyAxNEMxMy42IDE0IDE0IDEzLjYgMTQgMTNWMUMxNCAwLjQgMTMuNiAwIDEzIDBaIiBmaWxsPSIjREVERERBIi8+CjxwYXRoIGQ9Ik0zLjM5OTk5IDAuNTk5OTk4QzIuOTk5OTkgMC4xOTk5OTggMi41IDAgMiAwQzEuNyAwIDEuNTAwMDEgNy41OTk1OWUtMDcgMS4yMDAwMSAwLjIwMDAwMUMwLjUwMDAxMiAwLjUwMDAwMSAwIDEuMiAwIDJWMTJDMCAxMi44IDAuNTAwMDEyIDEzLjUgMS4yMDAwMSAxMy44QzEuNDAwMDEgMTMuOSAxLjcgMTQgMiAxNEMyLjUgMTQgMi45OTk5OSAxMy44IDMuMzk5OTkgMTMuNEw4LjM5OTk5IDguNEM5LjE5OTk5IDcuNiA5LjE5OTk5IDYuNCA4LjM5OTk5IDUuNkwzLjM5OTk5IDAuNTk5OTk4WiIgZmlsbD0iI0RFREREQSIvPgo8L3N2Zz4K");">
<div class="tooltip">Disable Auto skip ads</div>
</div>
<div class="skipping-ads-tooltip">
<div class="skipping-ads-tooltip-wand-block">
<div class="skipping-ads-tooltip-wand"></div>
</div>
<div class="skipping-ads-tooltip-block">
<div class="skipping-ads-tooltip-title">Auto skip ads</div>
<div class="skipping-ads-tooltip-content">Cốc Cốc can skip video ads automatically for you. Do you want to enable it now?</div>
<div class="skipping-ads-tooltip-notice">This is not an ad blocker, it just automates the process of clicking on the "Skip Ad" button</div>
</div>
<div class="skipping-ads-tooltip-btn">
<div id="skipping-ads-btn-cancel" class="skipping-ads-tooltip-btn-cancel">
Cancel
</div>
<div id="skipping-ads-btn-ok" class="skipping-ads-tooltip-btn-ok">
Yes, enable
</div>
</div>
</div>
<div class="mobile-box hidden">
<div class="mobile-content-box">
<div class="mobile-content-column-box">
<div class="mobile-content-column">
<div class="mobile-content mobile-header first">
<span class="mobile-instruction-text">
<span class="step-number">1</span>
Open Cốc Cốc Mobile
</span>
</div>
<div class="mobile-content mobile-instructions">
<img src="" alt="Instruction" class="instruction-image">
</div>
</div>
<div class="mobile-content-column">
<div class="mobile-content mobile-header second">
<span class="mobile-instruction-text">
<span class="step-number">2</span>
Scan QR code
</span>
</div>
<div class="mobile-switch-box">
<div class="switch">
<div class="switch-field">
<input type="radio" id="switch-video" name="send-type" value="video" checked="">
<label for="switch-video">Video</label>
<input type="radio" id="switch-audio" name="send-type" value="audio">
<label for="switch-audio">Audio</label>
</div>
</div>
</div>
<div class="mobile-content mobile-qrcode">
<div class="qrcode loading"></div>
</div>
</div>
</div>
<div class="mobile-content mobile-footer">
<span class="footer-text"> Don't have Cốc Cốc Browser on mobile? </span>
<div class="download-web-stores">
<div class="stores google-play" id="google-play">
</div>
<div class="stores app-store" id="app-store">
</div>
</div>
</div>
</div>
</div></div></div>
The code to get the Element after mouse hover as below:
public static WebElement getElementFromShadow(String jsPath) {
WebElement element = null
WebDriver driver = DriverFactory.getWebDriver()
JavascriptExecutor jse = ((driver) as JavascriptExecutor)
int attempts = 0;
while (attempts < 5) {
try {
element = ((jse.executeScript('return ' + jsPath)) as WebElement)
if (element != null) {
break;
}
else {
WebDriverWait wait = new WebDriverWait(driver, 10, 100);
element = wait.until(ExpectedConditions.elementToBeClickable(((jse.executeScript('return ' + jsPath)) as WebElement)))
}
} catch (Exception e) {
e.printStackTrace()
}
attempts++
Thread.sleep(2000)
}
return element
}
but when run it, I got org.openqa.selenium.StaleElementReferenceException: stale element reference: stale element not found
(Session info: chrome=91.0.4472.124)
PS: the above code works fine with the normal shadow element(No DOM is changed).
Could anyone know any idea/solution to solve the issue, thank you in advance!

Trigger Option change on el-select element of element-ui with Vue Jest ( Vue Test Utils )

I want to trigger option change for the el-select element of element-ui library, can anyone help how should i trigger it to change from option2 of default to option1 or something else using vue-test-utils with jest ?
I tried triggering 'change' event on el-select but nothing happens..
Below is how my rendered el-select element looks:
<div class="el-select testSelect">
<div class="el-input el-input--suffix">
<input type="text" readonly="readonly" autocomplete="off" placeholder="Select" class="el-input__inner">
<span class="el-input__suffix"><span class="el-input__suffix-inner"><i
class="el-select__caret el-input__icon el-icon-arrow-up"></i>
</span>
</span>
</div>
<div class="el-select-dropdown el-popper" style="display: none;">
<div class="el-scrollbar" style="">
<div class="el-select-dropdown__wrap el-scrollbar__wrap el-scrollbar__wrap--hidden-default">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item"><span>Option1</span></li>
<li class="el-select-dropdown__item selected"><span>Option2</span></li>
<li class="el-select-dropdown__item"><span>Option3</span></li>
<li class="el-select-dropdown__item"><span>Option4</span></li>
<li class="el-select-dropdown__item"><span>Option5</span></li>
</ul>
</div>
<div class="el-scrollbar__bar is-horizontal">
<div class="el-scrollbar__thumb" style="transform: translateX(0%); webkit-transform: translateX(0%);">
</div>
</div>
<div class="el-scrollbar__bar is-vertical">
<div class="el-scrollbar__thumb" style="transform: translateY(0%); webkit-transform: translateY(0%);">
</div>
</div>
</div>
</div>
</div>

Vue v-else without corresponding v-if

What is my code failing to compile v-else used on element <div> without corresponding v-if. ?
In the <div class="card">, I want to conditionally render the input and also show either the editor-container or ql-editor.
<template>
<li
class="component composition">
<div
v-if="editable == true"
class="drag-handle">
<icon-drag-handle></icon-drag-handle>
</div>
<div class="card">
<input
v-if="component"
#keypress="setUnsaved(true); autosave($event, "title", editorTitleId)">
</input>
<div
v-if="editable==true"
#keypress="setUnsaved(true); autosave($event, "content", editorContentId)"
class="editor-container">
</div>
<div
v-else
v-html="compositionContentHTML"
class="ql-editor">
</div>
</div>
<div
v-if="editable == true"
class="component-actions">
<a #click.prevent.stop="deleteComponent">
<icon-times></icon-times>
</a>
</div>
</li>
</template>

Selenium WebDriver click child element

I'm using selenium and I want to click a child element with 2 as value.
This is the full code:
<div class="dialer-keypad">
<div class="dialpad-row">
<div class="key">
<div class="value">1</div>
<div class="letters"></div>
</div>
<div class="key">
<div class="value">2</div>
<div class="letters">ABC</div>
</div>
<div class="key">
<div class="value">3</div>
<div class="letters">DEF</div>
</div>
</div>
<div class="dialpad-row">
<div class="key">
<div class="value">4</div>
<div class="letters">GHI</div>
</div>
<div class="key">
<div class="value">5</div>
<div class="letters">JKL</div>
</div>
<div class="key">
<div class="value">6</div>
<div class="letters">MNO</div>
</div>
</div>
</div>
So my question is How can I click this element?
<div class="value">2</div>
You should be able do this quite succinctly with XPath:
//*[contains(#class, 'value') and text()='2']
Alternatively, assuming that the markup was static you could target the element using specific indices. For example:
.dialpad-row:first-child .key:nth-child(2) .value
Simply use xpath
//div[contains (#class,'value') and contains (text(),'2')]

How to locate element using advance Xpath method?

I have following HTML code snippet:
<div class="pagging-box status-border status-border">
<div class="left-container">
<div>
<div class="clientid-hover">
<h4>AAB52</h4>
<div class="hover-title" style="display: none;">
<p>AAB52</p>
</div>
</div>
<div class="clientid-hover-state pl-info">
<h4>CO</h4>
</div>
<div class="client-name-hover">
<h4>Daniel-old Polar-old</h4>
</div>
<p class="contacting-client">Interview Partially Co..</p>
</div>
</div>
<div class="right-container">
<div class="start-session pull-right">
<a href="javascript:void(0)");" class="login-button">
<i class="fa fa-2x fa-play-circle continue-session"></i>
</a>
</div>
</div>
</div>
I want to locate the Anchor tag on the basis of <h4>AAB52</h4> text. I have tried to locate the same with siblings like following xpath
//div[h4[contains(. , "AAB56")]]/following-sibling::div[1]
(xpath is not correct as it is locating second one div immediate of AAB52 text )
following-sibling operates on the parent of the context node, so you first need walk up to the correct context node:
//h4[. = 'AAB52']/../../../following-sibling::div[1]/div/a
Alternatively you can use:
//div[./div/div/h4 = 'AAB52']/following-sibling::div[1]/div/a