Jade Template - SELECT OPTION with for - node.js

select(id="xxx", name="xxxyyy")
- for(var i = 1;i<10;i++){
option(value="#{i}") Some value for #{i}
- }
but it generates the following HTML
<select id="xxxx" name "xxxyyy"></select>
<option value="1">Some value for 1</option>
....
I've tried to include the select inside the for loop and it works as expected (it generates 10 select drop controls with one item on each one of them).
What am I missing here?

I think you've got your indentation messed up. Jade is like coffeescript, in that indentation is significant and donates nesting. See here. So that the Jade engine knows that your option loop should be within the select tag, the option loop needs to be indented from the select statement, whereas you've got yours level with the select statement.
select(id="xxx", name="xxxyyy")
-for(var i = 1;i<10;i++){
option(value="#{i}") Some value for #{i}
-}

Related

Find if text exist inside a nested Div, if yes print out the whole string, Selenium Python

i'm very new to selenium(3.141.0) and python3, and i got a problem that couldn't figure it out.
The html looks similar to this
<div class='a'>
<div>
<p><b>ABC</b></p>
<p><b>ABC#123</b></p>
<p><b>XYZ</b></p>
<div>
</div>
I want selenium to find if # exist inside that div, (can not target the paragraph only element because sometime the text i want to extract is inside different element BUT it's always inside that <div class='a'>) If # exist => print the whole <p><b>ABC#123</b></p> (or sometime <div>ABC#123<div> )
To find an element with contained text, you must use an XPath. From what you are describing, it looks like you want the locator
//div[#class='a']//*[contains(text(),'#')]
^ a DIV with class 'a'
^ that has a descendant element that contains the text '#' within itself or a descendant
The code would look something like
for e in driver.find_elements(By.XPATH, "//div[#class='a']//*[contains(text(),'#')]"):
print(e.get_attribute('outerHTML')
and it will print all instances of <b>ABC#123</b>, <div>ABC#123</div>, or <p>ABC#123</p>, whichever exists

Access specific index of array with Pug

How can you display a specific item in an array with Pug? For example:
each answer in answers
li!= answer.Response
Will display each item in the array. But, say I wanted just the the third item or, better yet, pass a variable for a specific index to display. What is the syntax for this?
- const indexIwant = 2;
if answers && answers.length>indexIwant
li=answers[indexIwant]
You need to ensure answers is not null and has at least the number of items to include the indexed item you want.
Another thing: don't use != unless you know exactly what data you are handling.
The simplest way to access a specific index of an array in pug:
-const meals = ["breakfast", "lunch", "dinner"]
-const favoriteDishes = ["coffee & doughnut salad","cheese danish soup","red wine","banana split sandwich"]
-const sides = ["ranch dressing","chutney","ketchup","chocolate sauce"]
p I reckon I will fix myself a hefty helping of #{favoriteDishes[2]} for #{meals[0]} with a side of #{sides[2]}.
Considering that indentation and whitespace is everything in jade / pug, this works :))

How to use siblings() and closest() in Geb test

I am trying to write a script to click an icon which is a part of the table header. Each column in the table has this icon in it (ascending order and descending order sorting icons). I am using Geb to do this. Here is how I am trying to do it:
In my SortingSpec.groovy file:
header.closest("div.customSortDownLabel").click()
I also tried
header.siblings('div.customSortDownLabel').first().click()
In the SortingPage.groovy file:
header {
grid.$(class: 'div.customHeaderLabel', text: 'Country')
}
In my html:
<div>
<div class="customHeaderLabel">{{params.displayName}}</div>
<div *ngIf="params.enableSorting" (click)="onSortRequested('asc', $event)" [ngClass]="ascSort" class="customSortDownLabel">
<i class="fa fa-long-arrow-alt-down"></i></div>
<div *ngIf="params.enableSorting" (click)="onSortRequested('desc', $event)" [ngClass]="descSort" class="customSortUpLabel">
</div>
None of them worked for me. It is not able to find the selector. Any suggestions are appreciated.
Error I see is:
geb.error.RequiredPageContentNotPresent: The required page content 'header - SimplePageContent (owner: SortingGrid, args: [], value: null)' is not present
That error looks like header isn't matching. Assuming that grid matches, and you're using some Javascript framework like Angular to substitute 'Country' for params.displayName, I would guess that maybe Geb is failing to find header before 'Country' is substituted. So, I would try making header wait for it:
header(wait: true) { grid.$(class: 'div.customHeaderLabel', text: 'Country') }
By the way, closest() goes in the wrong direction, to an ancestor, but siblings() looks good.
siblings() didnt work for me but next() worked for me. next() grabs the next sibling elements of the current context elements.
Example:
1. header.next().click() clicks the very next sibling
header.next("div.customSortDownLabel").click() looks for the very next sibling with the matching selector of 'div.customSortDownLabel' and then clicks it.

How to create Chrome extension that will search for text in source and alter formatting

I am new here... I am wondering if anyone could help point me in the right direction here.
I am looking to create a Chrome extension that searches a page for a number of different strings (one example: "(410)" or "(1040)" without the quotes) and highlight these so they're easier to see.
To explain a little further why I need this: I frequently work out of a queue with other coworkers, and there are specific things I need to focus on but I can ignore the rest of the questions on the page. So it would be helpful if my particular items were highlighted.
Thank you!
Edit: an example of how the source code works:
<td class="col-question">28 (510). <span id="ctl00_PlaceHolderMain_ctl01_ContentCheckList_ctl28_Label1" title=" <p>
<td class="col-question">49 (1150). <span id="ctl00_PlaceHolderMain_ctl01_ContentCheckList_ctl49_Label1" title="<p>
etc etc etc... there are around 100 numbers in parenthesis I would want highlighted. And probably another 100 that I wouldn't want highlighted.
Okay, to start off with I will show you how to inject the code into the page(s) you want, we will get to selecting the correct numbers in a bit. I will be using jQuery throughout this example, it isn't strictly necessary, but I feel that it may make it a bit easier.
First we declare a content script in our manifest as well as host permissions for the page you are injecting into:
"content_scripts": [
{
"matches": ["http://www.domain.com/page.html"],
"js": ["jquery.js","highlightNumbers.js"],
"css": ["highlight.css"]
}],
"permissions": ["http://www.domain.com/*"]
This will place our code in the page we are trying to change. Now you said that there are about 100 different numbers you would want to highlight and I will assume that these are specific numbers that don't match any patterns, so the only way to select all of them would be to make an explicit list of numbers to highlight.
highlightNumbers.js
// This array will contain all of the numbers you want to highlight
// in no particular order
var numberArray = [670,710,820,1000,...];
numberArray.forEach(function(v){
// Without knowing exactly what the page looks like I will just show you
// how to highlight just the numbers in question, but you could easily
// similarly highlight surrounding text as well
var num = "(" + v + ")";
// Select the '<td>' that contains the number we are looking for
var td = $('td.col-question:contains('+num+')');
// Make sure that this number exists
if(td.length > 0){
// Now that we have it we need to single out the number and replace it
var span = td.html().replace(num,'<span class="highlight-num">'+num+'</span>');
var n = td.html(span);
}
// Now instead of '(1000)' we have
// '<span class="highlight-num">(1000)</span>'
// We will color it in the css file
});
Now that we have singled out all of the numbers that are important, we need to color them. You can, of course, use whatever color you want, but for the sake of the example I will be using a bright green.
highlight.css
span.highlight-num{
background-color: rgb(100, 255, 71);
}
This should color all of the numbers that you put in the array in the js file. Let me know if there are any problems with it as I can't exactly test it.

verify certain value does not exists within a dropdown list

I wish to verify a certain value does not exist within a drop down list.
So html is:
<select id="delivery" name="delivery" onchange="this.form.submit();">
<option selected="selected" value="Del1">Delivey1</option>
</select>
So I wish to ensure that when I have certain items in my basket delivery option 2 is not present.
So the code I was trying:
result = #browser.select(:id, "delivery").include? ("Delivery2")
assert result = false
However this does not work.
Any suggestions or help would be appreciated!!
Thanks!
Based on your code, I am guessing that result is correct. It looks like the problem is the assertion. Doing the assertion
assert result = false
is not valid syntax (you cannot do an assignment here).
Try one of the following instead:
assert( result == false ) #Note that it is == instead of =
assert_equal( true, result )

Resources