Develop Reference

Header banner to start CSS after another div

My code with css is defined in my JSP and css as follows:
basic.css
*{
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css
#Outage{
width: 984px;
margin: 0 auto;
}
#bgd{
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper{
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner{
padding-right: 100px;
overflow: auto;
}
header.jsp
<div id="bgd">
<div id="Wrapper">
<div><img src="<%=contextPath%>/images/logo.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
<div>
<div>
Now I want to add outage at the top of all this as follows:
<div id="Outage">
<div id="notificationDiv" style="display:none; width: 255px; height: 34px;">Test</div>
</div>
<div id="bgd">...////...</div>
But this is acting as a layover on "bgd", so the img gets cuts off. I would want actually "Outage" to have a plain background and "bgd" and its css to start only after "Outage". Any help highly appreciated.
basic.css * {
padding: 0;
margin: 0;
}
body {
background: #eeeeec url(../images/image1.gif) repeat-x;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
padding: 0;
margin: 0;
}
layout.css #bgd {
background-image: url(../images/image2.gif);
background-position: top right;
background-repeat: no-repeat;
}
#Wrapper {
width: 984px;
margin: 0 auto;
}
/*-----------BANNER-----------*/
#banner {
padding-right: 100px;
overflow: auto;
}
<div id="bgd">
<div id="Wrapper">
<div><img src="https://data.photofunky.net/output/image/4/1/7/1/4171e9/photofunky.gif" alt="test and 123" width="255" height="34" />
</div>
<div id="banner">
<div id="procNae"></div>
</div>
</div>
</div>
I see that the div outage gets the same body as the dbg. Is there a way to apply body to my 1st div and bgd has its own div?

Entering values in a table through java selenium

Got a table with below html structure
<table style="width: 100%;" data-bind="foreach: CargoViewModel.PackageArray()">
<tbody style="border-bottom: 1px solid black !important">
<tr>
<td style="width: 19%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 20%; color: rgb(51, 51, 51);">
<input type="text" style="width: 85%;" data-bind="value: NoOfPkgs, hasFocus: NoOfPackagesFocus, event: { blur: OnNoOfPkgsChange }" onkeypress="return allowNumericOnly(event);" ondrop="AllowOnPaste(event,this,'Numeric');" onpaste="AllowOnPaste(event,this,'Numeric');" maxlength="5" placeholder="Packages">
</td>
<td colspan="2" style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<div class="input-group" data-bind="singlePopup: { pkgtype: 'PkgType', pkgtypename: 'PkgTypeName', callback: $root.PkgTypePopup }">
<input type="text" class="igPWCTextBox" data-bind="value: PkgTypeName, attr: { 'id': ($index() + 1) + '_txtPkgName' }, event: { blur: OnPkgsTypeChange.bind($data, 'CargoEdit') }, hasFocus: PkgTypeNameFocus" oncopy="return false" ondrag="return false" onpaste="return false" placeholder="Type" id="1_txtPkgName"><span class="input-group-btn">
<button class="butn" type="button" data-bind="attr: { 'id': ($index() + 1) + '_btnPkgType' }" tabindex="-1" id="1_btnPkgType"><i class="icon-search"></i></button>
</span>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsHazardous">
<a tabindex="-1" data-bind="attr: { 'title': HazardousIconTitle }" class="ui-icon icon-warning-sign red" style="font-size: 1.4em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#" title="DG"></a>
</td>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsReefer">
<a tabindex="-1" class="ui-icon icon-asterisk blue" title="Temperature Controlled" style="font-size: 1.6em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#"></a>
</td>
<td align="right" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsNonStackable"><span style="margin-right: 5px; vertical-align: middle; font-weight: bold; font-size: 14px;" title="Non Stackable">NS</span></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossPerPiece, event: { blur: OnPkgGrossPerPiece }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Per Piece">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossWeight, event: { blur: OnPkgGrossWeightChange }, hasFocus: PkgGrossWeightFocus" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Gross Weight">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 17%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgLength, event: { blur: OnPkgLengthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="L">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgWidth, event: { blur: OnPkgWidthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="W">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgHeight, event: { blur: OnPkgHeightChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="H">
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgVolume, event: { blur: OnPkgVolumeChange }, hasFocus: PkgVolumeFocus" onkeypress="allowNumbersafterDecimalPoint(event,this,IHDecimals.VolCBM);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Volume">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayVolumeUOM()">m<sup>3</sup></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 23%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea rows="3" title="Shipping Marks" style="width: 4.63cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" data-bind="value: MarksandNos, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), change: OnChangeCargoInput.bind($data, 'PkgMarks') }" placeholder="Shipping Marks"></textarea>
</td>
<td style="width: 27%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea title="Description" style="width: 5.51cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" rows="3" data-bind="value: GoodsDescription, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), change: OnChangeCargoInput.bind($data, 'PkgDesc') }" placeholder="Description"></textarea>
</td>
</tr>
</tbody>
<tbody style="border-bottom: 1px solid black !important">
<tr>
<td style="width: 19%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 20%; color: rgb(51, 51, 51);">
<input type="text" style="width: 85%;" data-bind="value: NoOfPkgs, hasFocus: NoOfPackagesFocus, event: { blur: OnNoOfPkgsChange }" onkeypress="return allowNumericOnly(event);" ondrop="AllowOnPaste(event,this,'Numeric');" onpaste="AllowOnPaste(event,this,'Numeric');" maxlength="5" placeholder="Packages">
</td>
<td colspan="2" style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<div class="input-group" data-bind="singlePopup: { pkgtype: 'PkgType', pkgtypename: 'PkgTypeName', callback: $root.PkgTypePopup }">
<input type="text" class="igPWCTextBox" data-bind="value: PkgTypeName, attr: { 'id': ($index() + 1) + '_txtPkgName' }, event: { blur: OnPkgsTypeChange.bind($data, 'CargoEdit') }, hasFocus: PkgTypeNameFocus" oncopy="return false" ondrag="return false" onpaste="return false" placeholder="Type" id="2_txtPkgName"><span class="input-group-btn">
<button class="butn" type="button" data-bind="attr: { 'id': ($index() + 1) + '_btnPkgType' }" tabindex="-1" id="2_btnPkgType"><i class="icon-search"></i></button>
</span>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsHazardous">
<a tabindex="-1" data-bind="attr: { 'title': HazardousIconTitle }" class="ui-icon icon-warning-sign red" style="font-size: 1.4em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#" title="DG"></a>
</td>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsReefer">
<a tabindex="-1" class="ui-icon icon-asterisk blue" title="Temperature Controlled" style="font-size: 1.6em; cursor: pointer; text-decoration: none; vertical-align: middle;" href="#"></a>
</td>
<td align="right" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="checkbox" value="0" data-bind="checked: IsNonStackable"><span style="margin-right: 5px; vertical-align: middle; font-weight: bold; font-size: 14px;" title="Non Stackable">NS</span></td>
</tr>
</tbody>
</table>
</td>
<td style="width: 15%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 25%; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossPerPiece, event: { blur: OnPkgGrossPerPiece }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Per Piece">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
<tr>
<td style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgGrossWeight, event: { blur: OnPkgGrossWeightChange }, hasFocus: PkgGrossWeightFocus" onkeypress="CheckDecimalNumber(event,this,IHDecimals.GrWt);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Gross Weight">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayWeightUOM()">kg</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 17%; vertical-align: top; color: rgb(51, 51, 51);">
<table style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgLength, event: { blur: OnPkgLengthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="L">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgWidth, event: { blur: OnPkgWidthChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="W">
</td>
<td style="vertical-align: top; width: 10%; color: rgb(51, 51, 51);">
<input type="text" style="width: 78%; text-align: right;" data-bind="value: PkgHeight, event: { blur: OnPkgHeightChange }" onkeypress="CheckDecimalNumber(event,this,IHDecimals.IHLWH);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="H">
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align: top; color: rgb(51, 51, 51);">
<input type="text" style="width: 65%; text-align: right;" data-bind="value: PkgVolume, event: { blur: OnPkgVolumeChange }, hasFocus: PkgVolumeFocus" onkeypress="allowNumbersafterDecimalPoint(event,this,IHDecimals.VolCBM);" ondrop="AllowOnPaste(event,this,'Number');" onpaste="AllowOnPaste(event,this,'Number');" maxlength="9" placeholder="Volume">
<span style="margin-left: 2px;" data-bind="html: CargoViewModel.DisplayVolumeUOM()">m<sup>3</sup></span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="width: 23%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea rows="3" title="Shipping Marks" style="width: 4.63cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" data-bind="value: MarksandNos, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgMarks'), change: OnChangeCargoInput.bind($data, 'PkgMarks') }" placeholder="Shipping Marks"></textarea>
</td>
<td style="width: 27%; vertical-align: top; color: rgb(51, 51, 51);">
<textarea title="Description" style="width: 5.51cm; margin-top: 3px; height: 40px; overflow-y: scroll; overflow-x: hidden; resize: none; padding: 1px;" rows="3" data-bind="value: GoodsDescription, event: { keyup: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), mousedown: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), paste: $parent.OnKeyupCargoInput.bind($data, 'PkgDesc'), change: OnChangeCargoInput.bind($data, 'PkgDesc') }" placeholder="Description"></textarea>
</td>
</tr>
</tbody>
</table>
How can I send values (through sendkeys) into textboxes and checkboxes associated with each row. How to traverse through each row with in this table.
The rows can also be dynamically added but how can I send values to textboxes and select checkboxes with in this table structure
Trying to achieve this through Selenium Java

This piece of code after hits and misses with the xpath(s) is working well.
List<WebElement> tbodyElements = driver.findElements(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody"));
System.out.println(tbodyElements.size());
for(int i=1; i<= tbodyElements.size(); i++)
{
String value=null;
if(i%2 == 0)
{
value="Bag";
}
else if(i%2==1)
{
value="Pallet";
}
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[1]/table/tbody/tr[1]/td[1]/input")).sendKeys("10");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[2]/table/tbody/tr[2]/td/input")).sendKeys("100");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[3]/table/tbody/tr[2]/td/input")).sendKeys("200");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[1]/table/tbody/tr[2]/td[3]/input")).click();
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[4]/textarea")).sendKeys("SM");
driver.findElement(By.xpath("//*[#id=\"divTemplatePkgDetails\"]/div[3]/table/tbody["+i+"]/tr/td[5]/textarea")).sendKeys("Description");
driver.findElement(By.id(i+"_txtPkgName")).sendKeys(value);
Thread.sleep(2000);;
driver.findElement(By.xpath("(//li[#class='active']//a)["+i+"]")).click();
}

i have a code of jw player wont show cc on mobile browsers?

i have this code for jw player it show the cc on desktop browsers but when i open it on my phone it wont show cc button can any one help me
<div id="player" class="jwplayer jw-reset jw-state-playing jw-skin-seven jw-stretch-uniform jw-flag-aspect-mode jw-breakpoint-4 jw-flag-user-inactive" tabindex="0" style="width: 100%; height: 270px;">
<div class="jw-aspect jw-reset" style="padding-top: 56.25%;"></div>
<div class="jw-media jw-reset"><video class="jw-video jw-reset" src="blob:http://ravitel.com/b8757611-97e2-4dc0-b9af-a76050d03843" __idm_id__="629968897" jw-loaded="data" style="object-fit: fill;"></video></div>
<div class="jw-preview jw-reset"></div><div class="jw-captions jw-captions-enabled jw-reset" style="height: 363px; font-size: 18.5px;"><div class="jw-captions-window jw-reset"><span class="jw-captions-text jw-reset" style="font-family: Arial, sans-serif; background-color: rgb(0, 0, 0);"></span></div></div><div class="jw-title jw-reset" style="display: none; padding-left: 0px; padding-right: 0px;">
<div class="jw-title-primary jw-reset"></div>
<div class="jw-title-secondary jw-reset"></div>
</div>
<div class="jw-overlays jw-reset"><div id="player_jwpsrv" class="jw-plugin jw-reset"></div><div id="player_related" class="jw-plugin jw-reset jw-plugin-related"></div></div>
<div class="jw-controls jw-reset"><div class="jw-display-icon-container jw-background-color jw-reset">
<div class="jw-icon jw-icon-display jw-button-color jw-reset" role="button" tabindex="0" aria-label="Pause"></div>
</div><div class="jw-controls-right jw-reset"><div class="jw-dock jw-reset">
</div></div><div class="jw-nextup-container jw-reset"><div class="jw-nextup jw-reset">
<div class="jw-nextup-tooltip jw-reset">
<div class="jw-nextup-header jw-reset">
</div>
<div class="jw-nextup-body jw-background-color jw-reset">
<div class="jw-nextup-thumbnail jw-reset"></div>
<div class="jw-nextup-title jw-reset"></div>
</div>
</div>
<button class="jw-nextup-close"></button>
</div><span class="jw-text jw-reset jw-text-alt" role="status"></span></div><div class="jw-group jw-controlbar-right-group jw-reset"><span class="jw-text jw-reset jw-text-duration" role="timer">۰۵:۰۹</span><div class="jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-next" role="button" tabindex="0" aria-label="Next" style="display: none;"></div><div class="jw-icon jw-icon-tooltip jw-icon-hd jw-button-color jw-reset jw-hidden" tabindex="0" role="button" aria-label="Quality" aria-hidden="true"><div class="jw-overlay jw-reset"></div></div><div class="jw-icon jw-icon-tooltip jw-icon-cc jw-reset jw-toggle jw-off" tabindex="0" role="button" aria-label="Closed captions" aria-hidden="true"><div class="jw-overlay jw-reset"></div></div><div class="jw-icon jw-icon-tooltip jw-icon-audio-tracks jw-button-color jw-reset jw-hidden" tabindex="0" role="button" aria-label="Audio tracks" aria-hidden="true"><div class="jw-overlay jw-reset"></div></div><div class="jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-volume" role="button" tabindex="0" aria-label="Volume" style=""></div><div class="jw-icon jw-icon-inline jw-button-color jw-reset jw-icon-cast jw-off" role="button" tabindex="0" aria-label="Chromecast" style="display: none;"></div><div class="jw-slider-volume jw-background-color jw-reset jw-slider-horizontal jw-reset" aria-hidden="true">
<div class="jw-slider-container jw-reset">
<div class="jw-rail jw-reset"></div>
<div class="jw-buffer jw-reset"></div>
<div class="jw-progress jw-reset" style="width: 90%;"></div>
<div class="jw-knob jw-reset" style="left: 90%;"></div>
</div>
</div><div class="jw-icon jw-icon-tooltip jw-icon-volume jw-button-color jw-reset" tabindex="0" role="button" aria-label="Volume" aria-hidden="false"><div class="jw-overlay jw-reset"><div class="jw-slider-volume jw-volume-tip jw-background-color jw-reset jw-slider-vertical jw-reset" aria-hidden="true">

Cannot locate Element that exist, getting NullPointerException instead of NoSuchElement

I'm trying to automatize a web datatable testing. I'm getting this NullPointerException in every WebElement object I'm using to locate. My code is simple as possible:
public class tableTestStepDefs {
#FindBy(how = How.XPATH, using = "//*[#id=\"contenido-table\"]/tbody/tr[1]/td[3]")
public WebElement cell1;
#FindBy(how = How.ID, using = "\"DTE_Field_sufijo\"")
public WebElement editableCell1;
#When("^I click on cell1 to make it editable$")
public void hagoClickEnUnaCeldaDeLaColumnaSufijo(){
driver.get("http://192.168.242.104:7777/some/context");
cell1.click();
}
I'm getting NullPointerException in every object, instead of NoSuchElementException which is the one I usually get when the driver cannot find some element, while the driver is properly entering the page. If I debug, I can locate all the elements with the same id or xpath expression in the driver's instance. No idea what's going on
Here is the HTML part:
<div class="dataTables_scrollBody ps-container ps-theme-default ps-active-x" data-ps-id="77fa0bd8-5ef4-1c4e-e67a-a8675b515900" style="position: relative; overflow: auto; width: 100%; height: 762px;">
<table id="contenido-table" class="table table-condensed table-striped dataTable no-footer" role="grid" aria-describedby="contenido-table_info" style="width: 2072px;">
<thead>
<tr role="row" style="height: 0px;">
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 112px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="ICAO Aerolinea: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">ICAO Aerolinea</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 43px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Vuelo: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Vuelo</div>
</th>
<th class="text-center editable sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 43px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Sufijo: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Sufijo</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 71px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Matricula: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Matricula</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 33px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Tipo: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Tipo</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 72px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Aeronave: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Aeronave</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 72px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Categoria: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Categoria</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 52px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Origen: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Origen</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 96px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Escala Previa: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Escala Previa</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 96px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Estado Vuelo: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Estado Vuelo</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 139px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Programada: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Programada</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 116px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Estimada: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Estimada</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 93px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fecha Actual: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fecha Actual</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 58px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Servicio: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Servicio</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 44px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Stand: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Stand</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 47px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Cintas: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Cintas</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 91px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Inicio Cintas: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Inicio Cintas</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 73px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Fin Cintas: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Fin Cintas</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 115px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Primera Maleta: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Primera Maleta</div>
</th>
<th class="text-center sorting" aria-controls="contenido-table" rowspan="1" colspan="1" style="width: 107px; padding-top: 0px; padding-bottom: 0px; border-top-width: 0px; border-bottom-width: 0px; height: 0px;" aria-label="Ultima Maleta: Activar para ordenar la columna de manera ascendente">
<div class="dataTables_sizing" style="height: 0px; overflow: hidden;">Ultima Maleta</div>
</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd">
<td class=" text-center" name="ICAO Aerolinea">DRA</td>
<td class=" text-center" name="Vuelo">5485</td>
<td class=" text-center editable" name="Sufijo"></td>
<td class=" text-center" name="Matricula" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">GBC001</td>
<td class=" text-center" name="Tipo" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">NA</td>
<td class=" text-center" name="Aeronave">A001</td>
<td class=" text-center" name="Categoria">C</td>
<td class=" text-center" name="Origen">LEBB</td>
<td class=" text-center" name="Escala Previa" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;"></td>
<td class=" text-center" name="Estado Vuelo">SCH</td>
<td class=" text-center" name="Fecha Programada" style="min-width: 97px">03/10/2018</td>
<td class=" text-center" name="Fecha Estimada"></td>
<td class=" text-center" name="Fecha Actual"></td>
<td class=" text-center" name="Servicio">A</td>
<td class=" text-center" name="Stand"></td>
<td class=" text-center" name="Cintas"></td>
<td class=" text-center" name="Inicio Cintas"></td>
<td class=" text-center" name="Fin Cintas"></td>
<td class=" text-center" name="Primera Maleta"></td>
<td class=" text-center" name="Ultima Maleta"></td>
</tr>
<tr role="row" class="even">
<td class=" text-center" name="ICAO Aerolinea">AAA</td>
<td class=" text-center" name="Vuelo">1234</td>
<td class=" text-center editable" name="Sufijo"></td>
<td class=" text-center" name="Matricula" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">GBC001</td>
<td class=" text-center" name="Tipo" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;">NA</td>
<td class=" text-center" name="Aeronave">A001</td>
<td class=" text-center" name="Categoria">C</td>
<td class=" text-center" name="Origen">LEBB</td>
<td class=" text-center" name="Escala Previa" style="display: table-cell;text-overflow: ellipsis;overflow: hidden;max-width: 195px;"></td>
<td class=" text-center" name="Estado Vuelo">SCH</td>
<td class=" text-center" name="Fecha Programada" style="min-width: 97px">03/10/2018</td>
<td class=" text-center" name="Fecha Estimada"></td>
<td class=" text-center" name="Fecha Actual"></td>
<td class=" text-center" name="Servicio">A</td>
<td class=" text-center" name="Stand"></td>
<td class=" text-center" name="Cintas"></td>
<td class=" text-center" name="Inicio Cintas"></td>
<td class=" text-center" name="Fin Cintas"></td>
<td class=" text-center" name="Primera Maleta"></td>
<td class=" text-center" name="Ultima Maleta"></td>
</tr>
</tbody>
</table>
<div class="ps-scrollbar-x-rail" style="width: 2063px; left: 0px; bottom: 3px;">
<div class="ps-scrollbar-x" tabindex="0" style="left: 0px; width: 2055px;"></div>
</div>
<div class="ps-scrollbar-y-rail" style="top: 0px; right: 3px;">
<div class="ps-scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div>
</div>
</div>

You are missing initialization of PageFactory, that's why you get NullPointerException instead of NoSuchElementException
Add constructor like this:
public class tableTestStepDefs {
#FindBy(how = How.XPATH, using = "//*[#id=\"contenido-table\"]/tbody/tr[1]/td[3]")
public WebElement cell1;
#FindBy(how = How.ID, using = "\"DTE_Field_sufijo\"")
public WebElement editableCell1;
public tableTestStepDefs() { //this!
PageFactory.initElements(driver, this);
}
#When("^i click on cell1 to make it editable$")
public void hagoClickEnUnaCeldaDeLaColumnaSufijo(){
driver.get("http://192.168.242.104:7777/some/context");
cell1.click();
}

One of your FindBy statements are wrong.
#FindBy(how = How.ID, using = "\"DTE_Field_sufijo\"")
You are saying that the ID includes the extra quotes. It should read:
#FindBy(how = How.ID, using = "DTE_Field_sufijo")
Try making that change and see if it works. Otherwise, you'll need to include the actual error message to help pin down where the problem is.

Create a tag searching bar

I'm a beginner in web-programming and I've got this problem with a search bar. The thing is how do I finish it so it'd give out a drop bar with prospective results to choose from and to select other div to give out the search results themselves? Should be something similar as the tag search bar down this page.
The code is below and thanks in advance! WHERE "TODO"!!!
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
var delay = (function(){ // to set timer
var timer = 0;
return function(callback, ms){
clearTimeout(timer);
timer = setTimeout(callback, ms);
};
})();
$(document).ready(function() {
var $search = $("#search");
$search.keyup(function() {
delay(function () {
var $string = $("#search").val();
if ( $string == "" || /\s+$/.test($string)) return;
var $tag = $string.match(/\S+$/)[0]
$.getJSON('/get_tags_by_substring', {'tag':$tag}, function ($data) {
console.log($data);
/* TODO */
});
}, 500);
});
}); </script> </head>
<style>
.search_bar{
bottom: 5px;
right: 100px;
/* margin-right: 10px; */
float: right;
} </style>
<header> <style type="text/css"> .form {
float: right;
margin-top: 0px;
margin-right: 10px; } </style>
<div id="wrapper">
<div id = "header" style="display: table; width: 1150px;">
<div id="logo" style="display: table-cell;">
<a href="/">
{% load staticfiles %}
<!--img src="{% static '.../images/logo_1.png'%}" alt="... logo" align="left"-->
</a>
</div>
<div style="display: table-cell;">
<nav id="navig" style="margin:0px;">
<ul>
<li class="button">1</li>
<li class="button">2</li>
<li class="button">3</li>
<li class="button">4</li>
</ul>
</nav>
</div>
<div class="search_bar">
<input type="text" id="search" placeholder="tag..."/><br/>
<div id="search_results"></div>
</div>
</div>
</div> </header>