Selenium how to locate cell in a table by value (python) - selenium

The table is dynamically generated and cells looks like
<div class="tableRow">
<input name="fileExt" type="hidden" value="complete">
<div class="tableCell rbpCheckBox">
<input data-index="0" name="SelectItem" type="checkbox" class="check" value="150909_ACTG_01_scyther_WD14R05C12.150910010134">
<input name="SelectPFolderName" type="hidden" value="P_0_2015-09-10-010132_master_ac-analysis_v2.3.0">
</div>
<div class="tableCell accordion-toggle cursor-pointer" data-toggle="collapse" data-target="#collaspseDiv_150909_ACTG_01_scyther_WD14R05C12_150910010134">
<p class="ellipsis rbpName" title="150909_ACTG_01_scyther_WD14R05C12">
150909_ACTG_01_scyther_WD14R05C12
</p>
<input type="hidden" name="formatted_run_name" id="150909_ACTG_01_scyther_WD14R05C12.150910010134"
value="150909_ACTG_01_scyther_WD14R05C12">
</div>
<div class="tableCell">
<span class="rbpStatus rbpStatusPadding" title="multichunk analysis pending at master">
<img src=" done.png " title="Done" class="runStatusImgTag">
</span>
</div>
<div class="tableCell">
<p class="rbpStatus">
scyther
</p>
</div>
<div class="tableCell">
<p class="rbpStatus">
2015-09-10 01:01:35
</p>
</div>
</div>
The reason why I have to locate the cell by value is because I would like to use it as confirmation that element is present on the page and we are ready to next step\action in the test-case, so I have to wait until some element will be displayed on the page and decided to wait for this cell
<div class="tableCell">
<p class="rbpStatus">
scyther
</p>
</div>
I'm trying to use something like
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "p.rbpStatus[contains('scyther')]")))

css selectors do not support contains function.
To wait for -
<div class="tableCell">
<p class="rbpStatus">
scyther
</p>
</div>
Try this:
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, "//p[contains(#class,'rbpStatus') and contains(text(),'scyther')]")))

Related

Correct bootstrap3 way to give padding on grid

I have four inputs in the same row and one of the input is conditionally visible by clicking "Click" button.
So if all four inputs are visible, the inputs datepicker1 and datepicker2 are sticked on the inputs above.
What is the correct bootstrap way to arrange and beautify the distances between the inputs?.
Gutters are not available on bootstrap 3.
<div class="col-md-3">
<select class="lookup-type-select form-control" name="created_lookup_type_1">
<option value="range">Range</option>
<option value="range__exclude">Exclude Range</option>
</select>
</div>
<div class="lookup-value">
<div class="col-md-3">
<select name="created__1_0" class="filter-input shortcut form-control" id="id_created__1_0">
</select>
</div>
<div class="col-md-8 row custom" style="display: inline;">
<div class="col-md-6">
<div class="datetimepicker input-group start-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_1" value="" type="text" id="datepicker1" placeholder="From">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<div class="col-md-6">
<div class="datetimepicker input-group end-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_2" value="" type="text" id="datepicker2" placeholder="To">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3 row month_only" style="display: none;">
<div>
<div class="datetimepicker input-group start-date date month_only" style="display: none;">
<input class="filter-input form-control" name="created__1_3" value="" type="text" id="id_created__1_3" placeholder="Month">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>
<button type="button" class="btn remove-button">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button onclick="myFunction()">Ckick</button>
<script>
function myFunction() {
if (document.getElementById('id_created__1_0').style.display != "none") {
document.getElementById("id_created__1_0").style.display = "none";
} else {
document.getElementById("id_created__1_0").style.display = "inline";
}
}
</script>
Jsfiddle example
Should be like the following pic

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!

how to find subsequent tags in selenium for a particular tag

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();

Two input field next to each other bootstrap 3

I'm new to bootstrap and have a problem placing two input fields next to each other. I've searched on the internet (and bootstrap.com), but couldn't find the anser.
Code:
Result. But I need the input fields and button next to each other in one row:
I tried using columns... didn't work
You can follow : Display two fields side by side in a Bootstrap Form
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
You can try below code
<div class="container content">
<div class='row'>
<form role="form" class="form-horizontal" method="post">
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search from this date">
</div>
</div>
<div class='col-xs-12 col-sm-4'>
<div class="form-group">
<input class="form-control" name="" placeholder="Search till this date">
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
<button class="btn btn-primary">Search</button>
</div>
</div>
<div class='col-xs-12'>
<div class="form-group">
Back
</div>
</div>
</form>
</div>
</div>

How to vertically align radio buttons

I have the following markup:
<div class="container-fluid">
<h2>Transfer Options:</h2>
<div class="row well well-sm">
<div class="col-xs-6">
<div id="sendTypeRadio" class="btn-group-vertical" >
<span class="input-group-addon">
<input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email
</span>
<span class="input-group-addon">
<input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments
</span>
<span class="input-group-addon">
<input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments
</span>
</div><!-- /input-group -->
</div><!-- /.col-xs-6 -->
</div>
</div>
The problem is the buttons are all next to each other on the x-axis. I have been changing things for a day. Moving it out of the row tag and back in, removing almost all the formatting and such. What I want to maintain is the input-group-addon styling, but I want each button on a new row. I've searched and found nothing, any clues?
In asking my question I came up with a really crappy answer:
<div class="container-fluid">
<h2>Transfer Options:</h2>
<div class="row well well-sm">
<div class="col-xs-6">
<div id="sendTypeRadio" class="btn-group-vertical" >
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioEmail" type="radio" name="sendType" value="email" disabled>Email
</span>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioAttachments" type="radio" name="sendType" value="attachments" disabled>Attachments
</span>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<span class="input-group-addon">
<input id="radioBoth" type="radio" name="sendType" value="both" disabled>Email and attachments
</span>
</div>
</div>
</div><!-- /input-group -->
</div><!-- /.col-xs-6 -->
</div>
This gives me each item on a new row but absolutely ruins the styling of Bootstrap radio buttons