Here is html code. I used iFrame class to identify and but unable to locate
<textarea class="form-control qlib-ck-editor" cols="20" id="QuestionText" name="QuestionText" onload="initializeCkInstance('QuestionText');" rows="7" style="visibility: hidden; display: none;"></textarea>
<div id="cke_QuestionText" class="cke_1 cke cke_reset cke_chrome cke_editor_QuestionText cke_ltr cke_browser_webkit" dir="ltr" lang="en" role="application" aria-labelledby="cke_QuestionText_arialbl"><span id="cke_QuestionText_arialbl" class="cke_voice_label">Rich Text Editor, QuestionText</span>
<div class="cke_inner cke_reset" role="presentation"><span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; user-select: none;">
<span id="cke_14" class="cke_voice_label">Editor toolbars</span>
<span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_14" onmousedown="return false;">
<span id="cke_15" class="cke_toolbar cke_toolbar_last" aria-labelledby="cke_15_label" role="toolbar">
<span id="cke_15_label" class="cke_voice_label">Basic Styles</span>
<span class="cke_toolbar_start"></span><span class="cke_toolgroup" role="presentation">
<a id="cke_16" class="cke_button cke_button__bold cke_button_off" href="javascript:void('Bold')" title="Bold (Ctrl+B)" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_16_label" aria-describedby="cke_16_description" aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(1,event);" onfocus="return CKEDITOR.tools.callFunction(2,event);" onclick="CKEDITOR.tools.callFunction(3,this);return false;">
<span class="cke_button_icon cke_button__bold_icon" style="background-image:url('https://qlib-qa.azurewebsites.net/Scripts/ckeditor/plugins/icons.png?t=I3I8');background-position:0 0px;background-size:auto;"> </span>
<span id="cke_16_label" class="cke_button_label cke_button__bold_label" aria-hidden="false">Bold</span>
<span id="cke_16_description" class="cke_button_label" aria-hidden="false">Keyboard shortcut Ctrl+B</span>
</a>
<a id="cke_17" class="cke_button cke_button__italic cke_button_off" href="javascript:void('Italic')" title="Italic (Ctrl+I)" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_17_label" aria-describedby="cke_17_description" aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(4,event);" onfocus="return CKEDITOR.tools.callFunction(5,event);" onclick="CKEDITOR.tools.callFunction(6,this);return false;">
<span class="cke_button_icon cke_button__italic_icon" style="background-image:url('https://qlib-qa.azurewebsites.net/Scripts/ckeditor/plugins/icons.png?t=I3I8');background-position:0 -24px;background-size:auto;"> </span>
<span id="cke_17_label" class="cke_button_label cke_button__italic_label" aria-hidden="false">Italic</span><span id="cke_17_description" class="cke_button_label" aria-hidden="false">Keyboard shortcut Ctrl+I</span>
</a>
<a id="cke_18" class="cke_button cke_button__underline cke_button_off" href="javascript:void('Underline')" title="Underline (Ctrl+U)" tabindex="-1" hidefocus="true" role="button" aria-labelledby="cke_18_label" aria-describedby="cke_18_description" aria-haspopup="false" onkeydown="return CKEDITOR.tools.callFunction(7,event);" onfocus="return CKEDITOR.tools.callFunction(8,event);" onclick="CKEDITOR.tools.callFunction(9,this);return false;">
<span class="cke_button_icon cke_button__underline_icon" style="background-image:url('https://qlib-qa.azurewebsites.net/Scripts/ckeditor/plugins/icons.png?t=I3I8');background-position:0 -120px;background-size:auto;"> </span>
<span id="cke_18_label" class="cke_button_label cke_button__underline_label" aria-hidden="false">Underline</span>
<span id="cke_18_description" class="cke_button_label" aria-hidden="false">Keyboard shortcut Ctrl+U</span></a>
</span><span class="cke_toolbar_end"></span></span>
</span>
</span>
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;">
<span id="cke_22" class="cke_voice_label">Press ALT 0 for help</span>
<iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" style="width: 100%; height: 100%;" title="Rich Text Editor, QuestionText" aria-describedby="cke_22" tabindex="0" allowtransparency="true"></iframe>
</div>
<span id="cke_1_bottom" class="cke_bottom cke_reset_all" role="presentation" style="user-select: none;">
<span id="cke_1_resizer" class="cke_resizer cke_resizer_vertical cke_resizer_ltr" title="Resize" onmousedown="CKEDITOR.tools.callFunction(0, event)">◢</span>
<div class="cke_wordcount" style="" title="Statistics">
<span id="cke_wordcount_QuestionText" class="cke_path_item">Characters: 0</span>
</div>
</span>
</div>
</div>
Related
<div style="max-height:400px;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="max-height:400px;">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="~/Images/slide1.jpg" alt="First slide" style="max-height:400px;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="~/Images/slide2.jpg" alt="Second slide" style="max-height:400px;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="~/Images/slide3.jpg" alt="Third slide" style="max-height:400px;">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
You can use position: absolute;z-index: 1; on banner,and change the position with margin.Here is a working demo:
<div style="max-height:400px;">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="max-height:400px;">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="~/Images/slide1.jpg" alt="First slide" style="max-height:400px;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="~/Images/slide2.jpg" alt="Second slide" style="max-height:400px;">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="~/Images/slide3.jpg" alt="Third slide" style="max-height:400px;">
</div>
</div>
<div class="banner">
<h5>banner</h5>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<style>
.banner {
background-color: black;
color: white;
height: 50px;
text-align: center;
margin-top: -50px;
position: absolute;
z-index: 1;
width:100%;
}
</style>
result:
I'm using the Webbrowser1.Document.GetElementById command.
Private Sub Button5_Click(sender As System.Object, e As System.EventArgs) Handles Button5.Click
Dim Col As String = ""
Try
Col = wb1.Document.GetElementById("_arialId_118.row.cells.displayName").Name.ToString()
Catch ex As Exception
MessageBox.Show(MessageBox.Show(ex.ToString()))
End Try
MessageBox.Show(Col)
End Sub
I know that the ID is correct, because I checked it maually. However, i still get a NullReferenceException. What could be the cause of this?
EDIT: Document Example:
<button type="button" class="_ph_I6 _ph_T6 o365button" tabindex="-1" role="group" id="_ariaId_118.row.cells"><div class="_ph_J6"> <div class="_ph_U6 _ph_R6"> </div> <div class="_ph_P6 _ph_R6 ms-font-color-neutralPrimary" tabindex="-1"> <span picturesize="50"> <span class="_ph_Q6 ms-font-weight-semilight PersonaPaneLauncher"><div class="_pe_d _pe_92 _pe_K _pe_i" role="button" tabindex="0" aria-expanded="false" aria-label="Persona-Karte" aria-haspopup="true"> <span class="_pe_j"> <div class="_pe_o2"> <span class="_pe_t _pe_R1 owaimg _pe_l2 _pe_q2 presenceJellyBeanBase presenceJellyBeanSmallBase presenceJellyBeanOffline" style=""> </span> </div> </span> <span class="_pe_n"> <div class="_pe_D1"><div style="display: none;"></div><div><div><div class="nonDraftPart _pe_12 _pe_j2 _pe_v2" style="background-size: cover; background-position: center center; background-color: rgb(43, 87, 151);">AA</div></div><div style="display: none;"></div></div></div> </span> <div style="display: none;"></div> </div></span> </span> </div> <span class="_ph_R6"> <span class="bidi _ph_S6 _ph_O6 disableTextSelection" tabindex="-1" role="button" id="_ariaId_119.row.cells.displayName" title="Abba Alessio">Abba Alessio</span> </span> <span class="_ph_R6"> <span class="bidi _ph_S6 _ph_O6 disableTextSelection" role="button" tabindex="-1" id="_ariaId_119.row.cells.emailAddress" title="Alessio_Abba#vs.sluz.ch">Alessio_Abba#vs.sluz.ch</span> </span> <span class="_ph_R6"> <span class="bidi _ph_S6 _ph_O6 disableTextSelection" role="button" tabindex="-1" id="_ariaId_119.row.cells.jobTitle" title="VSAD-Schüler">VSAD-Schüler</span> </span> <span class="_ph_R6"> <span class="bidi _ph_S6 _ph_O6 disableTextSelection" role="button" tabindex="-1" id="_ariaId_119.row.cells.officeLocation" title="VS">VS</span> </span> </div></button>
Try the following code instead:
Col = wb1.Document.GetElementById("_ariaId_119").Name.ToString ()
I am using the following code, in order to display a Menu with the right click (In Selenium context menu).
# encoding: utf-8
require 'watir-webdriver'
b = Watir::Browser.new
b.goto 'localhost:8080/swbadmin'
b.text_field(:name => 'wb_username').set 'admin'
b.text_field(:name => 'wb_password').set 'webbuilder'
b.button(:text => 'Login').click
a = b.div(:class => 'dijitTreeNodeContainer').div(:class => 'dijitTreeIsRoot').div(:class => 'dijitTreeRow').span(:class => 'dijitTreeContent')
c= a.span(:text => 'tst')
c.right_click
The thing is that dijitTreeNodeContainer is made by a dojo. So i have to wait until it loads all the information, I tried to use Watir::wait.until{ span(:text => 'tst').visible ?} but it dindn't work.
With this code without the line
c= a.span(:text => 'tst')
and with c.click, I'm able to click the default TreeContent, but when I try with right click or double_click, it throws an exception ( ..cannot preform native interactions...)
This is the html code
<div id="dijit_layout_AccordionPane_0" class="dijitContentPane dijitAccordionContainer-child dijitAccordionContainer-dijitContentPane dijitContentPaneSingleChild" selected="true" dojotype="dijit.layout.AccordionPane" widgetid="dijit_layout_AccordionPane_0" title="" style="width: 238px; height: 76.5px;">
<div url="/swbadmin/jsp/Tree.jsp?id=mtree" jsid="mtreeStore" dojotype="dojo.data.ItemFileWriteStore"></div>
<div childrenattrs="children" rootid="root" store="mtreeStore" jsid="mtreeModel" dojotype="dijit.tree.ForestStoreModel"></div>
<div id="mtree" class="dojoDndSource dojoDndTarget dojoDndContainer dijitTree" role="presentation" widgetid="mtree" tabindex="0" _dijitmenumtreemenu="1" style="width: 238px; height: 76.5px;">
<div class="dijitInline dijitTreeIndent" data-dojo-attach-point="indentDetector" style="position: absolute; top: -9999px"></div>
<div class="dijitTreeExpando dijitTreeExpandoLoading" data-dojo-attach-point="rootLoadingIndicator" style="display: none;"></div>
<div class="dijitTreeContainer" role="presentation" data-dojo-attach-point="containerNode" style="width: 100%;">
<div id="dijit__TreeNode_0" class="dijitTreeIsRoot dijitTreeNode dijitTreeNodeLoaded dijitLoaded" role="presentation" style="background-position: 0px 0px;" widgetid="dijit__TreeNode_0">
<div class="dijitTreeRow" role="presentation" data-dojo-attach-point="rowNode" style="padding-left: 0px; display: none;">
<div class="dijitTreeNodeContainer" style="height: auto;" role="tree" data-dojo-attach-point="containerNode" aria-expanded="true" aria-multiselectable="true">
<div id="dijit__TreeNode_3" class="dijitTreeIsRoot dijitTreeNode dijitTreeNodeNotLoaded dijitNotLoaded" role="presentation" style="background-position: 0px 0px;" widgetid="dijit__TreeNode_3">
<div class="dijitTreeRow dijitTreeRowSelected" role="presentation" data-dojo-attach-point="rowNode" title="" style="padding-left: 0px;">
<span class="dijitInline dijitTreeExpando dijitTreeExpandoClosed" role="presentation" data-dojo-attach-point="expandoNode"></span>
<span class="dijitExpandoText" role="presentation" data-dojo-attach-point="expandoNodeText">+</span>
<span class="dijitTreeContent" role="presentation" data-dojo-attach-point="contentNode">
<span class="dijitInline dijitIcon dijitTreeIcon swbIconWebSite" data-dojo-attach-point="iconNode" role="presentation"></span>
<span class="dijitTreeLabel" aria-selected="true" tabindex="-1" role="treeitem" data-dojo-attach-point="labelNode,focusNode" aria-expanded="false">Demo</span>
</span>
</div>
<div class="dijitTreeNodeContainer" style="display: none;" role="presentation" data-dojo-attach-point="containerNode"></div>
</div>
<div id="dijit__TreeNode_4" class="dijitTreeIsRoot dijitTreeNode dijitTreeNodeLoaded dijitLoaded" role="presentation" style="background-position: 0px 0px;" widgetid="dijit__TreeNode_4">
<div class="dijitTreeRow" role="presentation" data-dojo-attach-point="rowNode" title="" style="padding-left: 0px;">
<span class="dijitInline dijitTreeExpando dijitTreeExpandoClosed" role="presentation" data-dojo-attach-point="expandoNode"></span>
<span class="dijitExpandoText" role="presentation" data-dojo-attach-point="expandoNodeText">+</span>
<span class="dijitTreeContent" role="presentation" data-dojo-attach-point="contentNode">
<span class="dijitInline dijitIcon dijitTreeIcon swbIconWebSiteU" data-dojo-attach-point="iconNode" role="presentation"></span>
<span class="dijitTreeLabel" aria-selected="false" tabindex="-1" role="treeitem" data-dojo-attach-point="labelNode,focusNode" aria-expanded="false">tst</span>
</span>
</div>
<div class="dijitTreeNodeContainer" style="height: auto; display: none;" role="group" data-dojo-attach-point="containerNode">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You didn't mention which browser you're using - is it Firefox on Windows? In that case try spawning Chrome instead:
b = Watir::Browser.new :chrome
If you have to stick with Firefox, try disabling native events.
profile = Selenium::WebDriver::Firefox::Profile.new
profile.native_events = false
b = Watir::Browser.new :firefox, :profile => profile
I created a carousel using Twitter Bootstrap 3 and I cannot get it to work correctly. The slides seem to Overlay each other and it does not cycle through them all. Checked for coding errors but found none. Here is a Jsfiddle with my code: (http://jsfiddle.net/N6Y4D/)
Or here:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item-active">
<img src="img/slide1.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide2.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide3.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<script src= "js/jquery-2.0.2.js"></script>
<script src= "js/bootstrap.js"></script>
</body>
Here is complete code for it.. Inside the 'carousel-inner' you have written as 'item-active' , it should be 'item active' Both are separate classes.
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"> // error was occurring here it should item active not item-active
<img src="img/slide1.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide2.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
<div class="item">
<img src="img/slide3.png" style="height: 100%; width: 100%; display: block"/>
<div class="container">
<div class="carousel-caption">
<h1>Heading text</h1>
<p>Description</p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Pressing the "right" after 3 slides, the page becomes white.
But when you press the "left", ie go to the previous slide all goes well, the slides are changing.
Why are the buttons do not work the same way (to the right) causes a white screen?
<div class="container">
<div id="myCarousel" class="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<!--First slide-->
<div class="item active">
<img src="http://picsfab.com/download/image/26763/800x600_dogs-caravan.jpg" style="height: 100%; width: 100%; display: block;">
<!--For text to be centered-->
<div class="container">
<div class="carousel-caption">
<h1>It's my dogs. Welcome.</h1>
<p>This tag will container the text.
This tag will container the text.
This tag will container the text.
</p>
<p><a class="btn btn-sm btn-primary">Sign up</a></p>
</div>
</div>
</div>
<!--Second slide-->
<div class="item">
<img src="http://picsfab.com/download/image/82752/800x600_yukon-dogs-cold-for-cats-canada-expedition.jpg" style="height: 100%; width: 100%; display: block;">
<!--For text to be centered-->
<div class="container">
<div class="carousel-caption">
<h1>It's my dogs. Welcome.</h1>
<p>This tag will container the text.
This tag will container the text.
This tag will container the text.
</p>
<p><a class="btn btn-sm btn-primary">Sign up</a></p>
</div>
</div>
</div>
<!--Third slide-->
<div class="item">
<img src="http://picsfab.com/download/image/81152/800x600_sobaka-drug-wizard-dog.jpg" style="height: 100%; width: 100%; display: block;">
<!--For text to be centered-->
<div class="container">
<div class="carousel-caption">
<h1>It's my dogs. Welcome.</h1>
<p>This tag will container the text.
This tag will container the text.
This tag will container the text.
</p>
<p><a class="btn btn-sm btn-primary">Sign up</a></p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div> <!-- Carousel inner-->
</div> <!-- Carousel-->
</div> <!-- Container-->
All works!
</div> <!-- Carousel inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>