Clicking text (list item) with Selenium and Powershell - powershell

I have the following HTML and I am trying to find a way (in Powershell) to click the "folder" list item, which appears when the "new" button is clicked.
<div>
<i class="fa fa-fw fa-plus"></i>
<span>new</span>
<i class="fa fa-fw fa-caret-down margin-none margin-left-xsmall"></i>
</div>
<div class="itg-popover qa-itg-popover borderless point-to-right arrow-direction-up arrow-position-right open" style="left: 0px; top: 0px;">
<span class="arrow-container" style="height: 0px; width: 10px; left: calc(100% - 0px); top: 100%;">
<span class="arrow" style="border-width: 0px;">
</span>
</span>
<div class="itg-popover-content qa-itg-popover-content" style="left: calc(100% + 0px); transform: translateX(-100%); top: calc(-1px + 100%);">
<ul class="react-selectable-list qa-react-selectable-list">
<li data-id="assset" class="selectable-list-item qa-selectable-list-item">
<span class="sentence-case">
<a>document</a>
</span>
</li>
<li data-id="folder" class="selectable-list-item qa-selectable-list-item">
<span class="sentence-case">
<a>folder</a>
</span>
</li>
<li data-id="file-upload" class="selectable-list-item qa-selectable-list-item">
<span class="sentence-case">
<a>File Upload</a>
</span>
</li>
</ul>
</div>
</div>
Using the following code, I have clicked the "new" button:
$seleniumPath = 'C:\it\selenium'
Add-Type -Path "$seleniumPath\WebDriver.dll"
Add-Type -Path "$seleniumPath\WebDriver.Support.dll"
$chromedriver = New-Object OpenQA.Selenium.Chrome.ChromeDriver
$chromedriver.Navigate().GoToUrl('https://<url>')
$chromedriver.FindElementByXPath("//div[#id='react-main']/div/div[3]/div[2]/div[2]/div/div/div/div/div/div/div/i[2]").Click()
I thought I could create a SelectElement (so I could search by text) with this:
$SelectElement = [OpenQA.Selenium.Support.UI.SelectElement]::new($chromedriver.FindElementByXPath("//div[#id='react-main']/div/div[3]/div[2]/div[2]/div/div/div/div/div/div/div/i[2]"))
But I get this error:
Exception calling ".ctor" with "1" argument(s): "Element should have
been select but was i"
Sure enough, if I look at the object, there's, "i":
WrappedDriver : OpenQA.Selenium.Chrome.ChromeDriver
TagName : i
Text : New
document
folder
File Upload
Enabled : True
Selected : False
Location : {X=1025,Y=102}
Size : {Width=95, Height=35}
Displayed : True
LocationOnScreenOnceScrolledIntoView : {X=1025,Y=102}
Coordinates : OpenQA.Selenium.Remote.RemoteCoordinates
So the question in, how in the world do I click "folder"?

Related

I want the link generated, copied to clipboard

<div class="form-group m-l-4">
<label class="" for="">Share It :</label>
<p id="postcodep<?php echo isset($campaign['post_id']) ? $campaign['post_id'] : 0 ?>" style=" word-wrap: break-word; margin: 0px;
border: 1px solid #1083d4;
padding: 5px;
}">Please Generate Link</p>
</div>
<!--<button ng-click="getCode('<?php echo isset($campaign['post_id']) ? $campaign['post_id'] : 0 ?>', <?php echo isset($campaign['campaign_id']) ? $campaign['campaign_id'] : 0 ?>)" class="btn btn-default m-l-2 waves-effect waves-light"><span class="fa "></span>GET</button>-->
<button ng-click="getCode('<?php echo isset($campaign['post_id']) ? $campaign['post_id'] : 0 ?>', <?php echo isset($campaign['campaign_id']) ? $campaign['campaign_id'] : 0 ?>)" class="btn btn-info waves-effect waves-light m-b-5 btn-xs"><span class="fa fa-plus " ></span> GENERATE LINK </button>
I want the link generated, copied to clipboard
as soon as people click on generate link. Can anyone help me I am not to familiar with angular?
I don't know how this is working in Angular, but in pure JavaScript it can be something like:
<button id="get-link" data-link="<?= getCode() ?>">GET LINK</button>
document.getElementById('get-link').addEventListener('click', function () {
var temp = document.createElement('textarea');
temp.value = this.getAttribute('data-link');
document.body.appendChild(temp);
temp.select();
document.execCommand('copy');
document.body.removeChild(temp);
});

Trouble Toggling between two divs when a link is clicked - Javascript

I'm currently trying to work on a basic JavaScript application.
I ultimately want to have a book that shows basic information on it's cover and with the click of a link, the book will show additional information.
I have two divs; #frontBook which will displays the front of the book which includes basic information about the current Book (i.e. Title, Author, Pages, Read or not) and #insideBook which will display additional info about the book(i.e. what page they're up to, publisher's name, etc.)
I want the #frontBook div to show and #insideBook to be hidden at first. Then once #additional-info link has been clicked, I want #frontBook to be hidden and #insideBook to be shown.
I've added my code below but it does not work. I'm really not sure where I'm going wrong. Please Help!
Thanks in advance.
P.S. I know that JQuery would be recommended for something like this but I just want to make sure I can grasp this concept with JavaScript first.
HTML:
<div id="frontBook">
<div id="book-outline">
<div id="book-content">
<ul id="basic-book-content">
<li><span class="basic-book-details" id="new-title">Title: </span></li>
<li><span class="basic-book-details" id="new-author">Author: </span></li>
<li><span class="basic-book-details" id="new-pages">Pages: </span></li>
<li><span class="basic-book-details" id="new-read">Read?:</span></li>
<li style="line-height: 80px; margin-right:-2px;">
<a href="#" id="additional-info" onclick="toggle_book();">Additional Info
<i style="color:white;" class="far fa-caret-square-right" ></i>
</a>
</li>
</ul>
</div>
<!-- closes #book-content-->
</div>
</div>
<div id="insideBook" style="display:none">
<div id="inside-book-outline">
<div id="inside-book-content">
<ul id="additional-book-content">
<li><span class="additional-book-details" id="new-editor"> Editor's Name: </span></li>
<li><span class="additional-book-details" id="new-publisher">Publisher's Name: </span></li>
<li><span class="additional-book-details" id="new-pub-comp">Publsiher Company's Name: </span></li>
<li><span class="additional-book-details" id="new-page-at">Page Up to:</span></li>
<li><span class="additional-book-details" id="new-line-at">Line Up to:</span></li>
<li><span class="additional-book-details" id="new-genre">Genre:</span></li>
<li><span class="additional-book-details" id="new-in-series">In Series?:</span></li>
<li style="line-height: 80px; margin-right:-2px;">
<a href="#" id="less-info" onclick="toggle_book();">
<i style="color:white;" class="far fa-caret-square-right"></i>Less Info
</a>
</li>
</ul>
</div>
<!-- closes #inside-book-content-->
</div>
</div>
JavaScript:
function toggle_book() {
var front = document.getElementById('frontBook');
var inside = document.getElementById('insideBook');
if (inside.style.display === 'block') {
inside.style.display = 'none';
front.style.display = 'block';
} else {
inside.style.display = 'block';
front.style.display = 'none';
}
}
Well you seemed to have missed two things.
1) You're if statement logic is backwards it should be:
function toggle_book() {
var front = document.getElementById('frontBook');
var inside = document.getElementById('insideBook');
if (inside.style.display === 'block') {
inside.style.display = 'none';
front.style.display = 'block';
} else {
inside.style.display = 'block';
front.style.display = 'none';
}
2) You don't have a onclick attribute for the <a> tag in the insideBook to toggle it back

Tumblr Redirects to 404 Page

We have had a Tumblr page set up for a year with no issues until this past month.
We have a page redirect in our navigation bar. The redirect goes to our main website, WordBrewery.com. The link listed in the redirect is the main URL - http://www.wordbrewery.com.
Now it is redirecting to our site's 404 page and this is added to the end of the URL:
#_=_
I have tried using this script, but it has done nothing:
<script>
if (window.location.hash == "#_=_")
{
window.location.hash = "";
}
</script>
I have also tried replacing the main URL with a shortened Google version but this has not worked either.
Any help would be greatly appreciated.
EDIT:
The hard code that I am able to edit appears like this:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
{block:IfShowAvatar}
<img src="{PortraitURL-128}" class="{AvatarShape}" alt="{Title}" />
{/block:IfShowAvatar}
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
{block:IfShowTitle}<li class="active">{Title}</li>{/block:IfShowTitle}
{block:IfShowArchiveLink}
<li>{lang:Archive}</li>
{/block:IfShowArchiveLink}
{block:IfShowRandomLink}
<li>{lang:Random}</li>
{/block:IfShowRandomLink}
{block:HasPages}
{block:Pages}<li>{Label}</li>{/block:Pages}
{/block:HasPages}
{block:AskEnabled}
<li>{AskLabel}</li>
{/block:AskEnabled}
{block:SubmissionsEnabled}
<li>{SubmitLabel}</li>
{/block:SubmissionsEnabled}
{block:IfTagMenuList}
<li class="dropdown">
<a href="#" id="tag-menu" data-toggle="dropdown" aria-expanded="true">
{text:Tag Menu Title} <span class="caret"></span>
</a>
<script>
var list = '{text:Tag Menu List}';
list = list.split(',');
var html = '<ul class="dropdown-menu" role="menu" aria-labelledby="tag-menu">';
for(var i=0; i<list.length; i++) {
html += '<li role="presentation"><a role="menuitem" tabindex="-1" href="/tagged/' + list[i] + '">#' + list[i] + '</a></li>';
}
html += '</ul>';
document.write(html);
</script>
</li>
{/block:IfTagMenuList}
{block:IfShowSearch}
<li><a class="icon-search search-overlay-show"></a></li>
{/block:IfShowSearch}
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
I am unsure of how to get rid of the string Tumblr adds to redirected URLs but alternatively you can hard code the link to avoid utilising Tumblr's redirect.
Beneath {block:HasPages} add <li>WordBrewery.com</li>

All pictures in fancybox are showing

i have followed instructions for how to filter gallery according to categories and it worked but the problem that while i am scrolling it will scroll the whole pictures at the same category as shown in this picturesChecks the thumbnails below the picture before it was working fine but when i filter the gallery that was the result and i don't know where is the error exactly.
thanks for everyone helped me from the beginning specially #JFK
thanks for people here on stack overflow
jQuery(function ($) {
// fancybox
$(".fancybox").fancybox({
modal: false, // enable regular nav and close buttons
// add buttons helper (requires buttons helper js and css files)
padding:0,
helpers: {
thumbs : {
width : 50,
height : 50,
},
}
});
// filter selector
$(".filter").on("click", function () {
var $this = $(this);
// if we click the active tab, do nothing
if ( !$this.hasClass("active") ) {
$(".filter").removeClass("active");
$this.addClass("active"); // set the active tab
// get the data-rel value from selected tab and set as filter
var $filter = $this.data("rel");
// if we select view all, return to initial settings and show all
$filter == 'all' ?
$(".fancybox")
.attr("data-fancybox-group", "gallery")
.not(":visible")
.fadeIn()
: // otherwise
$(".fancybox")
.fadeOut(0)
.filter(function () {
// set data-filter value as the data-rel value of selected tab
return $(this).data("filter") == $filter;
})
// set data-fancybox-group and show filtered elements
.attr("data-fancybox-group", $filter)
.fadeIn(1000);
} // if
}); // on
}); // ready
<div id="galleryTab">
<a data-rel="all" href="javascript:;" class="filter active">All Projects</a>
<a data-rel="vil" href="javascript:;" class="filter">Villas</a>
<a data-rel="res" href="javascript:;" class="filter">Residential and Commercial</a>
<a data-rel="mix" href="javascript:;" class="filter">Mixed Used</a>
</div>
<div class="row"> </div>
<div class="col">
<div class="galleryWrap">
<ul id="projects">
<li id="liproject" data-tags="Villas"><a title="Mr.Omran Villa (G+1+R)" class="fancybox villa" data-fancybox-group="gallery" data-filter="vil" rel="villa1" href="images/Projects/1.jpg"><img src="images/Projects/1s.jpg" alt="omran" width="240" height="160" class="img-responsive"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-fancybox-group="gallery" data-filter="vil" rel="villa1" href="images/Projects/1h.jpg"><img src="images/Projects/1h.jpg" alt="omran"></a> <a class="fancybox" data-tags="Villas" data-fancybox-group="gallery" data-filter="vil" rel="villa1" href="images/Projects/12h.jpg"><img src="images/Projects/12h.jpg" alt="omran"></a> </div>
<div> <li data-tags="Villas"><a title="Mr.saif Villa (G+1+R)" data-tags="Villas" class="fancybox" data-fancybox-group="gallery" data-filter="vil" rel="villa2" href="images/Projects/2.jpg"><img src="images/Projects/2s.jpg" alt="saif" class="img-responsive"></a></li>
<div class="hidden"> <a class="fancybox" data-tags="Villas" data-fancybox-group="gallery" data-filter="vil" rel="villa2" href="images/Projects/21h.jpg"><img src="images/Projects/21h.jpg" alt="saif"></a> <a class="fancybox" data-tags="Villas" data-fancybox-group="gallery" data-filter="vil" rel="villa2" href="images/Projects/22h.jpg"><img src="images/Projects/22h.jpg" alt="saif"></a> </div>
<div id="res"> <li data-tags="bldg"><a title="Ajman Tower (G+8Podium+26 Typical+R)" class="fancybox" data-tags="Residential and Commercial" data-fancybox-group="gallery" data-filter="res" rel="bldg1" href="images/Projects/4.jpg"><img src="images/Projects/4s.jpg" alt="ajman" width="240" height="160" class="img-responsive" border="0"></a></li>
<div class="hidden"> <a class="fancybox" data-fancybox-group="gallery" data-filter="res" rel="bldg1" href="images/Projects/41h.jpg"><img src="images/Projects/41h.jpg" alt="ajman"></a> <a class="fancybox" data-fancybox-group="gallery" data-filter="res" rel="bldg1" href="images/Projects/42h.jpg"><img src="images/Projects/42h.jpg" alt="ajman"></a> </div>
</div>
</div>
</ul>
</div>
</div>

protractor by.repeater how to find sibling elements

I want to get the text for all the elements where the icon has error (don't want the one with warning) with class="dropdown-item-icon ctp-img-notification-error"
How can I get that?
In this case I only want the text "unable to load Data", since that is an error
<li ng-repeat="option in options" class="dropdown-item ng-scope">
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-error" data-ng-class="options.iconCls"></div>
<div class="ng-binding">unable to load Data</div>
</div>
</a>
<a href ng-class="{ selected : isSelected(option)}" ng-click="selectItem(option)">
<div data-ng-if="option.iconCls" class=ng-scope">
<div class="dropdown-item-icon ctp-img-notification-warning" data-ng-class="options.iconCls"></div>
<div class="ng-binding">using cache Data</div>
</div>
</a>
</li>
My first thought looks like this:
var errorMessages = [];
element.all(by.css('.dropdown-item-icon.ctp-img-notification-error .ng-binding')).then(function(items) {
items.forEach(function(item) {
item.getText().then(function(message) {
errorMessages.push(message);
});
});
});