locating submit element that is dynamically changing - element

I am trying to automate webpage(www.redfin.com) using selenium webdriver from excel. According to Firebug, I have successfully located the text input element and the submit element. When I test it from excel, it looks like the text are entered but the submit is not working even if I click the submit button manually.
I have managed to track the dynamically changing attribute(data-reactid). This is what I have tried,
Public Sub text()
Dim sel As New SeleniumWrapper.WebDriver
with sel
.start "chrome", "https://www.redfin.com/
.Open "/"
.Click "xpath=//input[contains(#data-reactid, '$0.0.0.0.0.1.0')]"
.Type "xpath=//input[contains(#data-reactid, '$0.0.0.0.0.1.0')]", "5720 lansdowne ave Philadelphia, PA"
.Click "xpath=//input[contains(#data-reactid, '$0.0.0.0.0.0')]"
.stop
end with
End Sub
And this is part of the html code
<form class="SearchBoxForm" data-reactid=".1k616yjndog.0.1.0.0.0.1.$0.0.0.0">
<div class="search-container inline-block" data-reactid=".1k616yjndog.0.1.0.0.0.1.$0.0.0.0.0">
<input class="inline-block SearchButton clickable float-right" type="submit" data-reactid=".1k616yjndog.0.1.0.0.0.1.$0.0.0.0.0.0" title="Search" value="" data-rf-test-name="searchButton">
<div class="InputBox" data-reactid=".1k616yjndog.0.1.0.0.0.1.$0.0.0.0.0.1">
<input class="search-input-box" type="text" data-reactid=".1k616yjndog.0.1.0.0.0.1.$0.0.0.0.0.1.0" title="City, Address, School, Agent, Zip" placeholder="City, Address, School, Agent, Zip" value="5600 Lansdowne Ave" aria-invalid="false" tabindex="1" aria-haspopup="true" role="textbox" autocomplete="off" name="searchInputBox" data-rf-test-name="searchBox">
<input class="btn-clear-search-input clickable" type="button" data-reactid=".1k616yjndog.0.1.0.0.0.1.$0.0.0.0.0.1.1" title="Clear">
</div>
</div>
<noscript data-reactid=".1k616yjndog.0.1.0.0.0.1.$0.0.0.0.1"></noscript>
</form>
As always, I really appreciate any help. Thank you.

Guys
Webdriver sendkey did the trick. Here is how ..
With Sel
.start "chrome", "https://www.redfin.com/"
.Open "/"
.Click "xpath=//input[contains(#data-reactid, '$0.0.0.0.0.1.0')]"
.findElementByXPath("//input[contains(#data-reactid, '$0.0.0.0.0.1.0')]").SendKeys "5617 Lansdowne Ave Philadelphia, PA"
.executeScript "window.open('http:\\www.realtor.com','_blank')" 'open New Tab
.switchToWindow -1 'switch to new tab
.findElementByCssSelector("#Location").SendKeys "5617 Lansdowne Ave Philadelphia, PA"
.Click "id=btnSearchHomePage"
End With
I am going to spend time learning selenium 2 rather than using IDE. I hope this will help someone else too.

Related

Web2py - How to process custom register form?

I am trying to create a custom register view/form and have it work with auth.register(), but so far I've had no luck. I mainly have two problems.
If I don't include response.view = 'register.html' in my controller the link register.html defaults to web2py's default register page (which works, but I don't want to use).
If I removed the response.view = 'register.html' from my controller func, then my custom form/view appears, but doesn't submit/validate. It just keeps popping the on-fail message "Oops something went wrong submitting the form"
Every thread I've read about this just says to specify the form=auth.register() in the controller and use the {{=form.custom.end}} in the view, but that doesn't seem to work. Am I missing something?
I also tried specifying the callback action for the form to action="{{=URL('default', 'register')}}, but if I add this the page won't do anything on submit either.
Here's my code:
Controller: (In default.py)
def register():
response.view = 'register.html'
db.auth_user.first_name.readable = db.auth_user.first_name.writable = False
db.auth_user.last_name.readable = db.auth_user.last_name.writable = False
return dict(form=auth.register())
View (default/register.html)
<body class="body-4">
<div class="form-block w-form">
<form id="email-form" name="email-form" data-name="Email Form">
<h1 class="heading-5">Register</h1>
<input type="email" class="text-field w-input" maxlength4="256" name="Email" data-name="Email" placeholder="Enter your email" id="Email" required="">
<input type="password" class="text-field w-input" maxlength="256" name="Password" data-name="Password" placeholder="Enter your password" id="Password" required="">
<input type="password" class="text-field w-input" maxlength="256" name="Password-2" data-name="Password 2" placeholder="Confirm your password" id="Password-2" required="">
<input type="submit" value="Register" data-wait="Please wait..." class="submit-button w-button">
{{=form.custom.end}}
<div class="w-form-done">
<div>Thank you! Your submission has been received!</div>
</div>
<div class="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
<script src="{{=URL('static','js/webflow.js')}}" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
You need to put the viewer code into the file default/register.html instead of register.html .
Then it works for me. You can see the resulting entry in the database.

Dynamic AMP Selector

How can I change dynamically where it says 40,95€/mes to the option selected in the radio buttons using AMP?
<form id="myform" method="get" action-xhr="#" target="_top">
<amp-selector class="radio-selector" layout="container" name="my-selector">
<div class="background_gris_0" option="b">
<label>
<div class="clm1 left center_input">
<input name="answer1"
value="Value 1"
type="radio"
on="change:myform.submit">
</div>
<div class="clm8 left">Antes 10GB* / AHORA 20GB / Llamadas ilimitadas / 19,95€/mes</div>
</label>
</div>
<div class="background_gris_1" option="c">
<label>
<div class="clm1 left center_input"><input name="answer1"
value="Value 2"
type="radio"
on="change:myform.submit"></div>
<div class="clm8 left">Antes 20GB* / AHORA 50GB / Llamadas ilimitadas / 24,95€/mes</div>
</label>
</div>
</amp-selector>
</form>
<div class="center">
<h1> 40,95€/mes</h1>
</div>
JS Fiddle
This can be achieved by using the amp-bind component.
First of all, I would like to suggest you to remove all change events from radio buttons in amp-selector. Shift that 'myForm.submit' action to amp-select's 'select' event.
Create a state variable called 'currentPrice'. This will be null in the beginning. But when a radio input is selected, this will have a value and update the text in the h1 element.
So, in radio buttons add this (change the value of currentPrice accordingly):
on="tap:AMP.setState({currentPrice: '19,95€/mes'})"
Then, in the h1 element do this:
[text]="currentPrice"
So whenever the radio button is tapped, the text at the bottom will be updated with price.
You can see the jsfiddle here:
Js Fiddle
I have removed form submit event for simplicity.

Forms testing Angular 4

I have done a small Web App in Angular 4 and I'm now trying to test it.
Here is what I would like to test :
<form class="navbar-form navbar-left" (ngSubmit)="onSubmit(f)" #f="ngForm">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search" ngModel name="name" pattern=".{2,}" required #name="ngModel">
</div>
<button type="submit" class="btn btn-default" [disabled]="!f.valid">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
<span class="help-block help" *ngIf="!name.valid && name.touched ">Please enter at least two characters</span>
</form>
At first, I would just like to test if the form is really invalid (and then I cannot click on the submit button) if thye word entered in the input is less than 2 characters.
Here is the test code I have written
beforeEach(() => {
fixture = TestBed.createComponent(NavbarComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should disable submit if word<2',()=>{
const compiled = fixture.nativeElement;
const input = fixture.debugElement.query(By.css('input'));
input.nativeElement.value='b';
input.nativeElement.dispatchEvent(new Event('input'));
fixture.detectChanges();
//console.log(compiled.querySelector('input').textContent);
//console.log(compiled.querySelector('.ng-valid'));
expect(compiled.querySelector('.ng-valid')).toBe(null);
});
The textContent of the input is modified properly but the form is still valid. However, when I use the webapplication, I can't submit the form is the word is less than two characters.
I feel like the word in the input doesn't really "reach" the form in the test. I've tried a lot of different things so any help would be great !

Text form that follows link

I have to create a form with a submit bottom following a link
<form action="http://domain/**(((MY TEXT INPUT VALUE)))**.htm">
<input type="text" name="verb">
<input type="submit" value="Conjugate">
</form>
something like this.
please note that every link should be different.
I also want that the new page be opened in a new tab/window
could you please help me, and also make changes to the form code if there is sth under newer standards. Thank you!
You need to use javascript to get the TEXTBOX value and then place it into the form action.
You can create the submit button with an onclickevent.
Or you can use jQuery
$('#btnSubmit').click(function(){
var sTextValue = $("#MyText").val();
$('#MyForm').attr('action', 'htttp://domain/' + sTextValue + '.htm');
$('#MyForm').submit();
});
And the HTML
<form id="MyForm" action="">
<input id="MyText" type="text" name="verb">
<input id="btnSubmit" type="button" value="Conjugate">
</form>
There are many ways to accomplish this. That's just one of them.
<form action="http://domain/**(((MY TEXT INPUT VALUE)))**.htm" id="btnForm">
<input type="text" name="verb" onchange='javascript:document.getElementById("btnForm").action = "http://domain/"+ this.value +".htm"'>
<input type="submit" value="Conjugate" >
</form
This would update as soon you type the text. It wouldn't require jquery. it makes use of onchange event handler of input type text
<form action="http://domain/**(((MY TEXT INPUT VALUE)))**.htm" id="btnForm">
<input type="text" name="verb" onchange='updateFormAction(this.value)'>
<input type="submit" value="Conjugate" >
</form>
<script type="text/javascript">
function updateFormAction(value){
var btnForm = document.getElementById("btnForm");
btnForm.action = "http://domain/"+ value +".htm";
}
</script>
This is more explanatory form. Its based on onchange event handler for text types.

How to execute some code before posting a form using classic ASP

Using classic ASP, I want to execute some code before submitting to a form, below is my code.
I am trying to store login credentials into cookies before posting the form to another page.
Please note that I am posting to an ASP.NET page that is held in a separate domain.
Another example, just to make this clearer. Let's say I want to validate fields before posting without using JavaScript.
<%
dim uname
uname= Request.Cookies("username")
%>
<FORM action="httppost_login.aspx" METHOD ="post" >
<br />Username: <INPUT NAME ="username" SIZE ="30" maxlength="15" value="<% if uname <>"" then response.write(uname) %>" />
<br />Password: <INPUT NAME ="password" SIZE ="30" type=password maxlength="20" />
<br />
<INPUT TYPE ="SUBMIT" value="Login" name="btnSubmit" />
<input type="checkbox" name="remember" value="Remember my username" <%if uname <> "" then Response.Write("checked")%> />Remember my username
</FORM>
<%
If Request.Form("btnSubmit") <> "" Then
uname=Request.Form("username")
dim rememberme
rememberme = request.form("remember")
if rememberme <> "" and uname <> "" then
Response.Cookies("username") = uname
Response.Cookies("username").Expires = Date() + 30
end if
end if
%>
You can't run code easilly after the submit button is pressed.
This comes down to design. Your form action is:
httppost_login.aspx
The 'standard' way of achieving what you want is by having code on that page which handles the cookies/anything else.
I would usually give the form action a querystring:
<FORM action="httppost_login.aspx?action=login" METHOD ="post" >
Then on that page, have:
Dim strPageAction
strPageAction = request.querystring("action")
if(strPageAction = "login" then
'Put your cookie code here, request.form("username") etc will still work!
end if
yes, a redirect page can post to a third party page using xmlhttp