I am having trouble finding good xQuery tutorials, basically what I am trying to do is retreive the text etc... from this html node
<div class="venue">
<div class="vitem">
<p style="padding: 6px 0pt 0pt;" class="label">ADDRESS:</p>
<p class="item-big">blabla</p>
</div><br class="clear">
<div class="vitem">
<p style="padding: 6px 0pt 0pt;" class="label">PHONE:</p>
<p class="item-big">123</p>
</div><br class="clear">
<div class="vitem">
<p style="padding: 6px 0pt 0pt;" class="label">WEB:</p>
<p class="item-big">etc...</p>
</div><br class="clear">
</div>
I'd like to know how can I get the data out of the 2nd p in the third div[#class="vitem"]
Or the p directly following the p[#class="label"] that contains the text WEB:
Edit: Answeres already helped a great bit, however my second question is if the layout changes to something like this
<div class="venue">
<div class="vitem">
<p style="padding: 6px 0pt 0pt;" class="label">ADDRESS:</p>
<p class="item-big">blabla</p>
</div><br class="clear">
<div class="vitem">
<p style="padding: 6px 0pt 0pt;" class="label">WEB:</p>
<p class="item-big">etc...</p>
</div><br class="clear">
</div>
How do i get the etc..., knowing only that it follows a p with the class label containing the text WEB:? it's no longer in div[3]/p[2]
Thanks!
I'd like to know how can I get the
data out of the 2nd p in the third
div[#class="vitem"]
Use:
/*/div[#class='vitem'][3]/p[2]/text()
This means: get all the text node children of the second p child of the third of all div elements that have an attribute class with value "vitem" and that are children of the top element.
Or the p directly following the
p[#class="label"] with the data WEB:
Use:
/*/div[#class='vitem'][3]/p[#class='label']
/following-sibling::p[1]/text()
This means: get all the text node children of the first following-sibling p of any p element with class attribute with value "label", that is a child of the third of all div elements that have an attribute class with value "vitem" and that are children of the top element.
UPDATE: The OP has added a second question: he wants just to select the p that has as a string value the text "etc..."
Use:
/*/div/p[.='etc...']
I'd like to know how can I get the
data out of the 2nd p in the third
div[#class="vitem"] Or the p directly following the p[#class="label"]
The semantically equal XPath/XQuery expressions are:
/div
/div[#class='vitem'][3]
/p[2]
Or
/div
/div[#class='vitem'][3]
/p[#class='label']
/following-sibling::p[1]
Related
In my Angular8 app, I have a drop zone where I can drag & drop files, such as PDF, MS Word, CSV, etc. I am using the technique found on this blog, but also documented by Mozilla MDN. The code works very well, but the one important thing I can't figure out is how to capture the file bytes being uploaded, so that I can save them to the database.
I placed a screenshot of the Opera browser source debugger below, showing the typescript and resulting fileObj and blobObj values. The debugger complains about readAsBinaryString(blobObj), saying that blobObj is not a Blob. Looking at the blobObj value, I can see it's not a Blob that I've seen before. And, looking at all the values, none stand-out to me as a Blob. Also, the file bytes aren't obvious either. Looking at the html, below, I can't think of a change that would reveal the bytes.
I'm hoping someone with drag and drop experience can explain how it's done.
Thanks!
Debugger Screenshot
HTML
<table class="table table-striped table-forum">
<tbody>
<tr>
<td>
<div class="container" style="float: left; padding-top: 10px; padding-left: 10px;" appDnd (fileDropped)="onFileDropped($event)" (itemDropped)="onItemDropped($event)">
<input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
<img src="assets/img/dnd/ic-upload-file.svg" alt="">
<h3>Drag and drop file here</h3>
<h3>or</h3>
<label for="fileDropRef" style="font-size: 14px; font-weight: 600; height: 25px; padding: 5px 5px;">Browse for File</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="files-list" style="width: 35%;">
<div class="single-file" *ngFor="let file of files; let i = index">
<img src="assets/img/dnd/ic-file.svg" width="45px" alt="file">
<div class="info">
<h4 class="name">
{{ file?.name }}
</h4>
<p class="size">
{{ formatBytes(file) }}
</p>
<app-progress [progress]="file?.progress" style="width: 200px;"></app-progress>
</div>
<img src="assets/img/dnd/ic-delete-file.svg" class="delete" width="20px" alt="file" (click)="deleteFile(i)">
</div>
</div>
</td>
</tr>
</tbody>
</table>
const reader = new FileReader();
// FileReader has an onload event that you handle when it has loaded data
reader.onload = (e: any) => {
const data = e.target.result as any;
console.log({type: 'GalleryComponent prepareFilesList - data:', data});
};
// this will kick off the onload handler above
reader.readAsDataURL(file);
I need to manage units associated to number input in html forms.
Forms are generated from xml files (that I can change if necessary) :
Voltage : <input type="number"/> V
Some layout may visually separate unit (V) from input : I want them to be tied together.
Ideally, unit is displaied inside the input, like an always visible placeholder.
I thought about using pseudo-element ::after but
In case you weren’t aware, an doesn’t allow ::before or ::after pseudo elements. None of the different input types do.
https://www.scottohara.me/blog/2014/06/24/pseudo-element-input.html
Does anyone have a good practise to easily support this ? (html or css)
This should give you a head start :
.input-with-unit {
white-space: nowrap;
}
.input-with-unit > input {
width: 100%;
padding-right: 2rem;
}
.input-with-unit > label {
position: absolute;
margin-left: -1rem;
margin-top: 0.125rem;
}
<div class="input-with-unit" style="width: 12rem;">
<input type="number" />
<label>V</label>
</div>
<div class="input-with-unit" style="width: 9rem;">
<input type="number" />
<label>A</label>
</div>
I have a strange issue i cannot explain. i am using the play framework and when i try to run the View below it only works when i REPEAT the form action below... it works but i know it's not right. appreciative if anyone can help explain or correct.
#(errorMessage: String = "")(implicit messages: Messages)
#helper.form(routes.ApplicationHomeController.login) {
#main(title = messages("single.title")) {
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="userbox">
<form action="#{routes.ApplicationController.doLogin()}" method="post"></form>
<form action="#{routes.ApplicationController.doLogin()}" method="post">
<div style="color: red">#errorMessage</div>
<h1 id="logintxt" style="background-color: rgb(11, 146, 9);
background-position: initial;
background-repeat: initial;">Driver Service <b>ß</b>eta</h1>
<div id="submit_giff" style="display: none;">
<hi> Authenticating: <img src="/assets/images/loader-bar.gif" align="absmiddle"> </hi>
</div>
<input id="name" name="userName" placeholder="Username" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<input id="pass" name="password" type="password" placeholder="Password" style="opacity: 1;
background-color: rgb(255, 255, 255);
background-position: initial;
background-repeat: initial;">
<p id="namealert" style="display: none;
opacity: 1;">Username:</p>
<p id="passal" style="display: none;
opacity: 1;">Password:</p>
<input id="loginbtn" style="opacity: 0.2;
cursor: default;" type="submit" value="Login">
</form>
</div>
<script src="/assets/javascripts/login.js"></script>
}
}
Two immediate observations.
One: #helper.form(...) will write a <form> element into the HTML that ultimately gets generated. Your view then includes other literal <form>s nested inside the first form. Nested forms are invalid HTML. You have one form submitting to routes.ApplicationController.doLogin and the other submitting to routes.ApplicationController.login. Who knows which of these the browser will actually submit to? We can't really predict because nested forms are invalid.
Two: you have your #main(...) view nested inside your #helper.form(...). I assume your main view contains <html>...</html>. This is going to result in HTML that starts with a <form> element, inside which is the <html> element. This is horribly invalid markup too.
My guess is one or both of these issues are your problem.
Try taking your generated HTML and running it through an HTML validator like https://validator.nu/. Fix any issues the validator finds, don't nest forms, and decide which (single) route the login form should actually submit to.
I am trying to make a responsive header/navigation form that has the following properties:
Has some type of label that is inline and vertically centered with the input box when the viewport is above a certain width.
At small viewport sizes, the label should center itself vertically above the input & button and the input/button combo should be 100% of the screen width.
Have a visually combined input and button, like the ones used in Bootstrap that won't split into separate lines
Either fill the width of the screen or be centered as the whole unit (header+input+button) when they're all on the same line
I have used this JS fiddle as a the starting point for the form to break the labels into a separate line on small widths and have successfully gotten it to work and for the label to center above the input at small viewports as well.
My code so far is
CSS
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
text-align: right;
vertical-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
#media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
text-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=numeric],
textarea,
select {
width: 100%;
}
}
HTML
1st Attempt
<header class="page-header row center-block">
<div class="center-xs">
<form class="main-form input-group" action="/caulcuate" method="post">
<label for="number" class="control-label"><h1 class="h1">BIG Label Header</h1></label>
<input type="number" name="number" min="10" max="6856" step="1" id="number" class="main-input"
placeholder="number goes here" required autofocus>
<span class="input-group-btn">
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
</span>
</form>
</div>
</header>
Attempt 2
<header class="page-header">
<form action="#">
<div>
<label class="desc" id="title1" for="numberhere"><h1>BIG Label Header</h1></label>
<div>
<input type="number" name="numberhere" min="10" max="6856" step="1" id="numberhere" class="main-input"
placeholder="number goes here" required autofocus>
<!--<span class="input-group-btn">-->
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
<!--</span>-->
</div>
</div>
</form>
</header>
Specific problems I'm having
In Attempt 2, I commented out the <span> that Bootstrap uses to group the button and input field because it will otherwise always put the button on a separate line.
In both attempts, the header label is not vertically centered with respect to the input box. I had it centered in an earlier iteration of Attempt 1, but I can't seem to get it back.
Attempt 1 just isn't centered properly at any size where the header row isn't taking up the full screen width. Attempt 2 does center consistently but the label header is too far from the input box at large screen sizes, so it's only centered in that there is roughly equal whitespace between the page border and the contents of the header.
Ideas for solution
Currently, the HTML in Attempt 1 seems like it is closer to what I want in terms of the label header and the button both being smooshed right up against the input box. Attempt 2, however, actually is responsive at small screen sizes.
It seems that maybe if I nest enough <div>s and am clever with their classes, I'll eventually get something that works about right, but would probably be fragile.
The other solution I thought of is to create two separate <header>s and wrap them in a pair of <div>s and use a #media query to change between which <div> is visible. This seems less fragile than using a ton of nested tags but also requires some code duplication. However, it seems like it might be the simplest option so far.
Somewhat related to switching between which <div> to display depending on the screensize, I suppose there probably is some jQuery way to do this and maybe CSS is currently the wrong tool for the heavy lifting in this case.
P.S. I wish I knew more about vector illustration so I could give an example of exactly what I'd want without all the descriptive text.
This is my first attempt at using watir-webdriver for automating. As I go through each test case,I learn new things and face new challenges.I'm so grateful for all the questions and answers here as it has helped me tremendously.Thanks
I'm faced with a new challenge and it's with popups and I'm not very clear on how to resolve this even after going through lot of popup questions on stackoverflow.
I haven't written the watir code yet....just trying to figure out how to do it.So appriciate some pointers.
So I'm trying to create a user profile-fill the form with all relevant information and hit Create profile button.(All this is coded and works fine).
On clicking the Create Profile button a pop up window pops up with lot of images on it in a tabular form and with text "please click on the image of apple". The text is randomly generated-so instead of apple I could be asked to click on a plane.I then need to click on that particular image.
How can I have watir-webdriver do this for me?How do i tell watir-webdriver to use pop up window,read the text at top,match it with image and click on the image?
Thanks.
Here's the error I get.Also included is watir code and HTML
Error:
ArgumentError: invalid window selector: {:id=>"humanVerificationContainer"}
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/window.rb:15:in `initialize'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/has_window.rb:35:in `new'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/has_window.rb:35:in `window'
===============================================================================
$b.window(:id => "humanVerificationContainer").use do
$b.link(:id => "humanVerificationQuestion").click
<div id="humanVerificationContainer" style="position: fixed; z-index: 9999; top: 50px; left: 750.5px; display: block;"><a class="close"></a><div id="humanVerificationQuestion" class="modal">
<h2>Click the picture of an aircraft carrier</h2>
<table>
<tbody><tr>
<td>
<div answer="0" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -300px 0px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="1" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat 0px -100px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="2" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat 0px -200px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="3" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -200px -100px; height:100px; width:100px"> </div>
</td>
</tr><tr>
<td>
<div answer="4" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -300px -400px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="5" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -600px -200px; height:100px; width:100px"> </div>
</td>
<td>
When a new browser window is opened, you can invoke the use method.
browser.window(:title => "annoying popup").use do
browser.button(:id => "close").click
end
Based on the html, the popup does not appear to be an actual window. Instead, it is just a div tag within the main page that looks like a popup. Assuming it is not in an frame, you can treat it like you would any other div tag.
To get the "popup":
popup = $b.div(:id => "humanVerificationContainer")
To get the subject at the top of the popup:
subject = popup.h2.text.gsub(/^Click the picture of an? /, '')
#=> "aircraft carrier"
To click the "image", which is actually a div with a background image:
popup.div(:class => 'humanImage').click
However, there does not appear to be a way to determine which image is the aircraft. So your developers will likely need to put some sort of identifier in or make sure the image is always in the same answer (just for the test environment).