We Keep Coding

How to select dropdown item with same data-testid

Im trying to get selenium to click an option in a dropdown. There are several options and it looks like the only unique thing about them is the link text. They all have 'data-testid' and they are all the same.
Anyone see a way to click a specific choice within the dropdown?
Here are a few examples of options within the dropdown: (App installs and Lead Generation)
<li class="" data-testid="ads-mini-grouped-objective-selector-option" style=""><div aria-checked="false" aria-disabled="false" class="_2wpb _3v8w" data-testid="SUISelectorOption/container" role="menuitem" style="letter-spacing: normal; color: rgb(75, 79, 86); font-size: 12px; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px; padding: 6px 24px 6px 32px;" tabindex="-1"><span class="_27_z _4s-j" style="margin-left: 0px; margin-right: 8px;"></span><div class="_3leq"><span>App installs</span></div></div></li>
<li class="" data-testid="ads-mini-grouped-objective-selector-option" style="background-color: rgba(29, 33, 41, 0.08);"><div aria-checked="false" aria-disabled="false" class="_2wpb _3v8w" data-testid="SUISelectorOption/container" role="menuitem" style="letter-spacing: normal; color: rgb(75, 79, 86); font-size: 12px; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px; padding: 6px 24px 6px 32px;" tabindex="-1"><span class="_27_z _5da8" style="margin-left: 0px; margin-right: 8px;"></span><div class="_3leq"><span>Lead generation</span></div></div></li>
I have tried to select by link text but that did not work.

To click an option from the Dropdown you can write a function as clickOption() as follows :
public void clickOption(String option)
{
driver.FindElement(By.XPath("//li[#data-testid='ads-mini-grouped-objective-selector-option']//span[.='" + option + "']")).Click();
}
Now, from your main() or #Test annotation Class, call the function clickOption() method with the option which you want to select as follows :
clickOption("App installs");
//or
clickOption("Lead generation");

You can use XPath to select li element by attribute data-testid and inner text :
//li[#data-testid='ads-mini-grouped-objective-selector-option' and .='Lead generation']

driver.findElement(By.xpath("(//li[#data-testid='ads-mini-grouped-objective-selector-option'])[2]")).click();
Try this xpath to click second data with same data-testid:

har07 answer is a good answer,
you can also try this as an option
//*[text()='App installs']/parent::div/parent::div/parent::li
Because not all the html is given, this is the only option i can get

How to add responsive behaviour to the asp:GridView

I want the asp gridview to show responsive behaviour like the html table does with the no-more-table css style as
seen here http://bootsnipp.com/snippets/featured/no-more-tables-respsonsive-table.
Is there a way to achieve it.
I have tried one way before, which is to replace my gridview with the html table and apply no-more-table style from
code behind. But I don't want to do this as I want to all the features offered by the asp:GridView.

I have written custom css to achieve this feature. To use my code follow the below steps,
Step1: Enclose your GridView inside a section with Id as no-more-gridView
as below
<section id="no-more-gridView">
<asp:GridView..>
.
</asp:GridView>
</section>
Step2: Assign a data-title attribute to each of your cells from code behind (inside the RowDataBound function) like below,
e.Row.Cells[0].Attributes["data-title"] = "Col1Name";
e.Row.Cells[1].Attributes["data-title"] = "Col2Name";
e.Row.Cells[2].Attributes["data-title"] = "Col3Name";
.
.
Step3: Finally include my custom style given below. Use media query to apply the style at whatever screen size you wish it to come to effect and that should pretty much do the trick.
/* Author : Vinay
Description: Responsive GridView
*/
/* Force gridview to not be like gridview anymore */
#no-more-gridView table,
#no-more-gridView thead,
#no-more-gridView tbody,
#no-more-gridView th,
#no-more-gridView td,
#no-more-gridView tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-gridView .table_column_head > * {
display:none;
}
#no-more-gridView tr { all: revert;border: 2px solid #ccc;height:auto !important;}
#no-more-gridView td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
white-space: normal;
text-align:left;
padding-bottom: 1em;
}
#no-more-gridView td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align:left;
font-weight: bold;
}
/*
Label the data
*/
#no-more-gridView td:before { content: attr(data-title); }

ASP.NET Panels disappears

In my code behind I have the following:
public void btnDoSomething_Click(object sender, EventArgs e)
{
if (sku.Peso == 0)
{
ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "Validation",
"<script type='text/javascript'>alert('You can't do that!');</script>", false);
pnlSKU.Style.Remove("visibility");
pnlSKU.Style.Add("visibility", "visible");
}
else
//It does something...
pnlSKU.Style.Remove("visibility");
pnlSKU.Style.Add("visibility", "visible");
}
In my aspx I have the following inside the panel pnlSKU:
<asp:Panel ID="pnlSKU" runat="server" Style="visibility: hidden; overflow-x: auto overflow-y: scroll; border-right: black thin solid;
border-top: black thin solid; z-index: 200; left: 210px; border-left: black thin solid;
border-bottom: black thin solid; position: absolute; top: 28%; height: 500px;
background-color: white; width: 900px;">
The code in itself is very much longer but It doesn't matter at this point.
Everytime the condition is met the control panel dissapears completely even If I call the method add to the Style property and put "visible".
Any idea why is happening?

Dynamic text underlined by braces

I want to underline a word with a round brace. This should be part of a C# Text but if it is easier in CSS, no problem. My problem is that the length of the Word can vary, so the bow must by calculated for each word.
My first idea was using CSS box-shadow:
CSS:
#test {
font-size: 50px;
background: transparent;
border-radius: 70px;
height: 65px;
width: 90px;
box-shadow: 0px 6px 0px -2px #00F;
font-family: sans-serif;
}
HTML:
<div id="test">Hey</div>
Unfortunately due to the dynamic Text sizes I can't calculate them.
Is there a smarter approach to this problem?

You don't need to calculate the width if you use span tags instead.
CSS:
.test {
font-size: 50px;
background: transparent;
border-radius: 70px;
height: 65px;
box-shadow: 0px 6px 0px -2px #00F;
font-family: sans-serif;
}
HTML:
<span id="test" class="test">Hey</span><br/>
<span class="test">Hey this is longer</span>
Working Fiddle: http://jsfiddle.net/Ge8Q3/

I found a different approach.
Working fiddle: http://jsfiddle.net/6pEQA/1/
I used javascript and made the width dynamic:
textWidth function taken from here.
$.fn.textWidth = function(){
var self = $(this),
children = self.contents(),
calculator = $('<span style="white-space:nowrap;" />'),
width;
children.wrap(calculator);
width = children.parent().width(); // parent = the calculator wrapper
children.unwrap();
return width;
};
$(document).ready(function(){
$('#test').css('width',$('#test').textWidth());
});
It also works with h1, div or span. You can check my fiddle. Because it is using span elements to calculate width of the element.

Expanding gridview's row

One of gridview's column is a "Content" column that can have few lines of text (it can be literal, textbox or label ).
In "default" mode i want it to show only the first line and a link button: "(more)" or "(read)".
Clicking on this link should expand the column and display full content.
What is the best way to do this?

Selecting first 10 characters of content text and using it as your link's text is better aproach. This will reduce size of data that retrieved from database like that :
SELECT ContentId, SUBSTRING(Content, 0, 10) AS Content
FROM ContentTable;
Then you can use template column for this column that includes a label and a link. Lbel for the description text, link for the details.
<asp:TemplateColumn>
<ItemTemplate>
<asp:Label
Text='<%# Eval("Content") %>'
runat="server"/>
<a href='<%# Eval("ContentId", "contentdetails.aspx?id={0}") %>'>More</a>
</ItemTemplate>
</asp:TemplateColumn>

This will help you.
http://www.asp.net/community/control-gallery/Item.aspx?i=1465

try this. http://mosesofegypt.net/post/BuildingjQueryAndASPNetAJAXEnabledControlsjQueryCollapsiblePanelExtenderPart2.aspx

Use the power of CSS!
Place this inside your gridview row. It will naturally push out the row to the height of your content, or the amount of rows required.
<div class="toggle">
<div class="toggle-header">
Toggle!
</div>
<div class="toggle-height">
<div class="toggle-transform">
<p>2nd line of text</p>
<p>3rd line</p>
<p>4th line</p>
<p>etc</p>
</div>
</div>
</div>
And use this CSS...
body {
font-family: sans-serif;
}
.toggle {
position: relative;
border: 2px solid #333;
border-radius: 3px;
margin: 5px;
width: 200px;
}
.toggle-header {
margin: 0;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor: pointer;
}
.toggle-height {
background-color: tomato;
overflow: hidden;
transition: max-height .6s ease;
max-height: 0;
}
.toggle:hover .toggle-height {
max-height: 1000px;
}
.toggle-transform {
padding: 5px;
color: white;
transition: transform .4s ease;
transform: translateY(-100%);
}
.toggle:hover .toggle-transform {
transform: translateY(0);
}
You may want to disguise the "toggle" with a textbox of your "(more)" line to expand the rest.
Let us know if it worked.