I want to test for broken images on the page.
If I inspect the DOM for the broken image I see
<img src="https://www.example.com/images/a123.jpg" alt="a123">
#shadow-root (user-agent)
<span id="alttext-container">
<img id="alttext-image" width="16" height="16" align="left" style="margin: 0px;
display: inline; float: left;">
<span id="alttext">a123</span>
</span>
But if I try to access the alttext in the test it fails.
cy.get('img[src="https://www.example.com/images/a123.jpg"]')
.shadow()
.find('span[id="alttext"]')
How do I verify the alt text that shows on the screen.
Unfortunately the #shadow-root (user-agent) child element can't be accessed from javascript, so it also can't be queried with Cypress commands.
The best you can do to verify the image isn't broken is to check it's naturalWidth property
cy.get('img[src="https://www.example.com/images/a123.jpg"]')
.should('be.visible')
.and($img => expect($img[0].naturalWidth).to.be.gt(0))
Related
Hi I am new in exploring cypress.
I notice that, there is no select options in my html code. How can I select the option in the dropdown box?
Let's take a look of my html
<div class="row asset_config">
<div class="loader-container">
<div class="loader-content">
<div class="required form-group"><label for="cc_7sgwxb2v9" class="">allocation</label>
<div class="Select css-b62m3t-container"><span id="react-select-3-live-region" class="css-1f43avz-a11yText-A11yText"></span><span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-1f43avz-a11yText-A11yText"></span>
<div class="Select__control css-1s2u09g-control">
<div class="Select__value-container css-319lph-ValueContainer">
<div class="Select__placeholder css-14el2xx-placeholder" id="react-select-3-placeholder">Select allocation</div>
<div class="Select__input-container css-6j8wv5-Input" data-value=""><input class="Select__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="cc_7sgwxb2v9" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 1; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"></div>
</div>
<div class="Select__indicators css-1hb7zxy-IndicatorsContainer">
<div class="Select__indicator Select__dropdown-indicator css-tlfecz-indicatorContainer" aria-hidden="true"><span class="connect-icon connect-icon-caret-down"></span></div>
</div>
</div><input name="allocationType" type="hidden" value="">
</div>
</div>
</div>
</div>
</div>
In fact, I also notice that, cypress studio suggest me code to click the dropdown box:
cy.get(':nth-child(2) > form > .allocation_session > .asset_config > .loader-container > .loader-content > .required > .Select > .Select__control > .Select__value-container > .Select__input-container').click()
I found that not only unreadable is this approach, but also not reliable, because sometimes suggested codes that click on other dropdown doesnt work, if I didnt run the example code above or other suggested code.
Is there any reason behind why suggested code is coupled with other suggested code?
Is there a better way to select the element I want to get?
edit:
picture included
The react-select has the same user-actions as an ordinary HTML select, but you cannot use cy.select() command on it.
The general pattern is
open the dropdown menu by clicking on the "main" control
find the option you want to select within the menu listbox that is injected into the DOM after the above click action
click that option
verify the text of the option is now showing in the placeholder
// open the dropdown menu
cy.contains('label', 'allocation')
.next('.Select')
.click()
// find the option
cy.contains('Balanced Plus')
.click()
// verify option is selected
cy.contains('label', 'allocation')
.next('.Select')
.find('.Select__placeholder')
.should('contain', 'Balanced Plus')
I am trying to select a value from the table of dropdown menu. But Watir always gave me the unlocate error when using table/tr/td.
I can't locate the element using
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').text
But the output of code below returns true.
#browser.div(:id, 'wikiActionMenuLink_dropdown').element(:tag_name, 'table').element(:tag_name, 'tbody').element(:tag_name => 'td').exists?
I also tried
#browser.select_list(:id, 'wikiActionMenuLink_dropdown').select_value('Delete Wiki')
but got error "unable to locate element, using {:id=>"wikiActionMenuLink_dropdown", :tag_name=>"select"}"
Below the html. Could someone give me some suggestions?
<div id="wikiActionMenuLink_dropdown" class="dijitPopup dijitMenuPopup" style="visibility: visible; top: 123.75px; left: 1592px; right: auto; z-index: 1000; height: auto; overflow: visible; display: none;" role="region" aria-label="dijit_Menu_2" dijitpopupparent="">
<table id="dijit_Menu_2" class="dijit dijitReset dijitMenuTab`enter code here`le lotusPlain dijitMenu dijitMenuPassive" cellspacing="0" tabindex="0" role="menu" widgetid="dijit_Menu_2" style="top: 0px; visibility: visible;">
<tbody class="dijitReset" data-dojo-attach-point="containerNode">
<tr id="dijit_MenuItem_15" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Edit Wiki " title="Edit settings of this wiki." widgetid="dijit_MenuItem_15">
<tr id="dijit_MenuItem_16" class="dijitReset dijitMenuItem" tabindex="-1" role="menuitem" data-dojo-attach-point="focusNode" style="-moz-user-select: none;" aria-label="Delete Wiki " title="Delete this wiki." widgetid="dijit_MenuItem_16">
</tbody>
</table>
<iframe class="dijitBackgroundIframe" src="javascript:""" role="presentation" style="opacity: 0.1; width: 100%; height: 100%;" tabindex="-1">
<html>
<head></head>
<body></body>
</html>
</iframe>
</div>
Watir will only return the text of an element if the text is currently visible, regardless of whether the element exists. If you made the same call in your first example with .present? instead of .exists? it would return false.
For non-select/option dropdown interactions, you usually need to click the dropdown element first, and then once the options are visible, click on the one you want.
Hi i have a div like below
<div id="iconArrow"><img src="footer.jpg" width="35" height="27" style="position:fixed;"></div>
i need to add a text "more" on right side of image. please help me check the example image for final output.
after adding codes
It could have something to do with HTML5.
HTML5
<figure>
<img src="footer.jpg" width="35" height="27">
<figcaption>More</figcaption>
</figure>
CSS
figure {
position: fixed;
}
figure > * {
float :left;
}
Here's a jsFiddle
If you want your image to be fixed and you want to add a text beside it I suggest your wrap your image tag in another div with fixed position and do this:
<div id="wrapper" style="position: fixed;width: 35px;height: 27px;">
<img src="footer.jpg" width="35" height="27" /><div style="position: absolute;right: 0">your note</div>
</div>
my IE8 doesn't show images inner the figure tag.
TYPO3 Installation 6.1.x
DOCTYPE HTML5
css styled content (latest)
Frontend: Text & Image will shown as
<div class="csc-textpic-imagewrap">
<div class="csc-textpic-center-outer">
<div class="csc-textpic-center-inner">
<figure class="csc-textpic-image csc-textpic-last">
<img height="308" width="828" alt="" src="fileadmin/media/image.JPG">
</figure>
</div>
</div>
</div>
I 've included HTML5shiv Script - nothing happens .. then I tries to unwrap the figure element with jQuery - nothing happens
Has anyone an idea how I can show my image wrapped with
it was a responsive big
img {
max-width: auto;
width: 100%;
/* and for IE 8 */
width: auto\9;
}
That's it Damn.!
I had the same problem:
tt_content.image.20.rendering.singleNoCaption.singleStdWrap.wrap.override >
tt_content.image.20.rendering.noCaption.singleStdWrap.wrap.override >
Or instead of deleting it, replace it with whatever html you like.
just set this in config typoscript
doctype = html5
On this site> http://upcycledonline.com/test/Site/defaultUpCyc.html when I view it in chrome the rightEdge image looks like it is pushed down by something. I have rearranged the code several times and tried the image in different places with no luck. Help please!
Should I throw it in a div and try to make it do something that way?
You can change the markup? If so, do this:
<div id="header" style="overflow:auto">...</div>
<img src="leftEdge.png" style="float: left;">
<div style="float:left;">
<img src="topEdge.png" style="float: left;">
<div id="content">...</div>
<img src="bottomEdge.png" style="float: left;">
</div>
<img src="rightEdge.png" style="float: left;">
Note that:
Nothing inside the new floated div should itself be floated.
You need that overflow:auto on the header
You will have to adjust the height of the content div