We Keep Coding

Puppeteer.NET: Can't autopopulate field

I am a just starting out with Puppeteer.NET, and i can't get it to autofill a login page.
The HTML for the web site looks like this:
<div class="main-wrapper">
<div class="row">
<div class="column section col-md-8">
<div class="loginForm">
<img src="images/logo.svg" width="300">
<br /><br /><br />
<div style="color: #454550; font-family: 'Neuzeit Grotesk'; font-size: 16px; ">
Welcome back
</div>
<br />
<form action="/login?app=LM&var=au" method="POST" name="login-form" id="login-form">
<input type="hidden" name="_csrf" value="BQ2YoR3d-5P__6b5HfqlVOjv8YgTypKV92XA" />
<div class="form-group text-center">
<input type="text" name="username" id="login-form-username" placeholder="Username" class="form-control" required value="">
</div>
<div class="form-group text-center">
<input type="password" name="password" id="login-form-password" placeholder="Password" class="form-control" required>
</div>
<div class="text-center">
<button type="submit" class="btn btn-danger btn-lg btn-block">Login</button>
</div>
</form>
<div style="color: #808083; margin-top: 30px; font-family: 'Roboto2';">
Trouble logging in?
<img src="images/grey_line.svg" width="300">
Sign up
</div>
</div>
<div style="text-align: center; width:400px;">
<img src="images/logo.svg" width="300">
</div>
</div>
<div class="column section col-md-4">
<iframe width="100%" height="100%" frameBorder="0" src="https://"></iframe>
</div>
</div>
</div>
I am trying to get it to fill in the login and password fields, and press the login button.
I am doing it as:
var extra = new PuppeteerExtra();
var stealth = new StealthPlugin();
LaunchOptions options = new LaunchOptions
{
Headless = false,
ExecutablePath = "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
};
Browser browser = extra.Use(stealth).LaunchAsync(options).Result;
string content = null;
using (Page page = browser.NewPageAsync().Result)
{
// do login screen
page.GoToAsync(url);
page.WaitForNavigationAsync();
page.WaitForSelectorAsync("username");
page.FocusAsync("username");
page.Keyboard.TypeAsync(login);
page.WaitForSelectorAsync("password");
page.FocusAsync("password");
page.Keyboard.TypeAsync(password);
page.ClickAsync("submit");
page.WaitForNavigationAsync();
content = page.GetContentAsync().Result;
}
I have tried changing the "username" to "#username" and some other variations, but nothing gets filled in. Ultimately, all I want to to login and then go to a specific page, and have a dump of the resultant HTML.
Also is there a easy way to just a text dump of the resultant HTML?

You can use the selectors #login-form-username and #login-form-password, those are the IDs.

HTTP ERROR : 405(This page isn't working) When I Refresh The Page(ASP.Net Core MVC)

I am working on an ASP.Net Core MVC website where I have a page with datatable which has a button for every record which leads to further details of that record. When I click that details button, it works fine but when I refresh the details page, I encounter the above mentioned error. There are no any debugging errors as per my knowledge. Please help me out!!
Here is the code for the page with the datatable :
#model Derawala.Models.ViewModels.ParentForApply
#{
Layout = "_Layout";
}
<form method="post">
<div class="container p-3">
<div class="row pt-4">
<div class="col-6">
<h2 class="text-success">Application List</h2>
</div>
</div>
<br /><br />
#if (Model.AppList.Any())
{
<table id="myTable" class="table table-hover align-middle table-bordered table table-striped" style="width:100%">
<thead>
<tr>
<th class="text-center">
Applicant Name
</th>
<th class="text-center">
Contact No
</th>
<th class="text-center">
Institute Name
</th>
<th class="text-center">
Institute Contact
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var obj in Model.AppList)
{
<tr>
<td class="text-center text-primary" style="font-weight:bold;">#obj.FirstName</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.Contact</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.Institute</td>
<td class="text-center text-primary" style="font-weight:bold;">#obj.InstCnt</td>
<td class="text-center">
<div class="w-75 btn-group" role="group">
<button type="submit" asp-action="Details" asp-route-Id="#obj.Id" class="btn btn-primary mx-2">
<i class="fas fa-list"></i>
</button>
<a asp-action="Delete" asp-route-Id="#obj.Id" class="btn btn-danger mx-2">
<i class="fas fa-trash-alt"></i>
</a>
</div>
</td>
</tr>
}
</tbody>
</table>
}
else
{
<p>No Application Exists!</p>
}
</div>
</form>
This is the view of page with the datatable
When I click on the Details button(blue button), it leads to the details page shown below :
Here is the code for the Details Page :
#model Derawala.Models.ViewModels.ParentForApply
#{
ViewData["Title"] = "Details";
Layout = "_Layout";
}
<form method="post">
<input asp-for="#Model.Apply.PofId" hidden />
<div class="container backgroundWhite pt-4">
<div class="card" style="border:1px solid #000000; ">
#*<div class="card-header bg-dark text-light ml-0 row container" style="border-radius: 0px;">*#
<div class="card-header" style="background-color:black;">
<div class="row">
<div class="col-12 col-md-6 align-self-start">
<h1 class="text-white">#Model.Apply.FirstName #Model.Apply.LastName</h1>
</div>
<div class="col-12 col-md-6 align-self-end">
<h1 class="text-warning">Application Id :#Model.Apply.AppId</h1>
</div>
</div>
</div>
<div class="card-body">
<div class="container rounded p-2">
<div class="row">
<div class="col-12 col-lg-4 p-1 text-center">
<img src="#WC.ImagePath[0]#Model.Apply.Photo" class="rounded w-25" />
</div>
<div class="col-12 col-lg-8">
<div class="row pl-3">
<div class="col-12">
<span class="badge p-3 border" style="background-color:lightpink">#Model.Apply.Qualification</span>
<span class="badge p-3 border" style="background-color:lightskyblue">#Model.Apply.BankName</span>
<h3 class="text-success"></h3>
<p class="text-secondary">#Model.Apply.Description</p>
</div>
</div>
<div class="row pl-3">
<div class="col-12">
Download Id Proof : <button type="submit" class="btn-primary" asp-route-id="#Model.Apply.PofId" asp-action="DownloadFile">Download</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-footer bg-dark">
<div class="row">
<div class="col-12 col-md-6 ">
<a asp-action="RemoveFromCart" class="btn btn-primary btn-square form-control btn-lg" style="height:50px;">Donate Now <i class="fas fa-hand-holding-medical"></i></a>
</div>
<div class="col-12 col-md-6">
<button type="submit" asp-action="" class="btn btn-danger form-control btn-lg" style="height:50px;">Delete This Application <i class="fas fa-trash-alt"></i></button>
</div>
</div>
</div>
</div>
</div>
</form>
This is the view of details page :
and when I refresh this details page it gives me this HTTP 405 error :

Your Details action probably has [HttpPost] attribute and you call it using your submit button. But when you are trying to refresh the browser calls Get method. So you have to remove [HttpPost] from the details action, or create another one with [HttpGet].

How to switch the focus to Angular popup and scroll the element and click

In my Page, when clicking on link, VW-Modal appears - now I have to scroll that popup to element and then click but somehow when I'm running it's working in VS but not when running through VM - CCNet
Code: Not working
((IJavaScriptExecutor)Driver).ExecuteScript("arguments[0].scrollIntoView();", Driver.FindElement(button_RedoReasons_by));
Driver.MoveToElement(button_RedoReasons_by);
Driver.Click(button_RedoReasons_by);
XPath:
var button_RedoReasons_by = By.XPath("//[#class='redo__reason']//[contains(#class, 'chosen-container')]");
DOM Elements:
<!-- ngIf: vm.viewModel.redoPoup === true -->
<div class="job-progress-details redo-request-modal ng-scope" ng-if="vm.viewModel.redoPoup === true">
<div class="popup-header">
<h3 class="ng-binding">Order Redo Request [1434467]</h3>
X
</div>
<!-- NEW MODAL BODY -->
<div class="popup-content">
<!-- REDO ENTIRE ORDER -->
<div ng-show="vm.sendRedoRequestCtrl.viewModel.isRedoEntireOrder === true" class="ng-hide">
<div class="redo__option">
<h3 class="redo__order-num ng-binding">Order Number 1434467</h3>
<div class="redo__option-all" id="redo-option-all">
<div class="redo__input-label">
<input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-waitlist-all" name="redo-option-all" value="1" class="ng-pristine ng-untouched ng-valid">
<label for="redo-waitlist-all">To Waiting List</label>
</div>
<div class="redo__input-label">
<input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-artworkedit-all" name="redo-option-all" value="2" class="ng-pristine ng-untouched ng-valid">
<label for="redo-artworkedit-all">Artwork Edit</label>
</div>
<div class="redo__input-label">
<input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-print-all" name="redo-option-all" value="3" class="ng-pristine ng-untouched ng-valid">
<label for="redo-print-all">Straight to Print</label>
</div>
</div>
<div class="redo__reason-group--all">
<span class="redo__category--all">
<label for="redo-category-all">Redo Category</label>
<!-- ngIf: !vm.sendRedoRequestCtrl.viewModel.isLoaded --><select chosen="" data-ng-if="!vm.sendRedoRequestCtrl.viewModel.isLoaded" data-placeholder="Select redo category.." ng-model="vm.sendRedoRequestCtrl.viewModel.redoEntireOrderCategoryId" ng-options="p.Id as p.Name for p in vm.sendRedoRequestCtrl.viewModel.listRedoCategories track by p.Id" ng-change="vm.sendRedoRequestCtrl.changedRedoCategoryRedoEntire(vm.sendRedoRequestCtrl.viewModel.redoEntireOrderCategoryId)" class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope" style="display: none;"><option value="?" selected="selected"></option></select><div class="chosen-container chosen-container-single" style="width: 100%;" title=""><a class="chosen-single chosen-default"><span>Select redo category..</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div><!-- end ngIf: !vm.sendRedoRequestCtrl.viewModel.isLoaded -->
</span>
<span class="redo__reason--all">
<label for="redo-reason-all">Redo Reason</label>
<!-- ngIf: !vm.sendRedoRequestCtrl.viewModel.isLoadedReason --><select chosen="" style="width: 80%; display: none;" data-ng-if="!vm.sendRedoRequestCtrl.viewModel.isLoadedReason" data-placeholder="Select redo reason.." ng-model="vm.sendRedoRequestCtrl.viewModel.redoEntireOrderReasonId" ng-options="cr.Id as cr.Name for cr in vm.sendRedoRequestCtrl.viewModel.listRedoReasons track by cr.Id" class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope"><option value="?" selected="selected"></option><option label="Sent to wrong person" value="8">Sent to wrong person</option></select><div class="chosen-container chosen-container-single" style="width: 100%;" title=""><a class="chosen-single chosen-default"><span>Select redo reason..</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div><!-- end ngIf: !vm.sendRedoRequestCtrl.viewModel.isLoadedReason -->
</span>
</div>
</div>
<div class="redo__action">
<!-- ngIf: vm.sendRedoRequestCtrl.viewModel.showValidation === true -->
Redo Entire Order
</div>
</div>
<div ng-show="vm.sendRedoRequestCtrl.viewModel.isRedoEntireOrder === false">
<div class="redo__option">
<h3 class="redo__order-num ng-binding">Order Number 1434467</h3>
<div class="redo__option-all">
<div class="redo__input-label">
<input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-waitlist" value="1" class="ng-pristine ng-untouched ng-valid" name="49">
<label for="redo-waitlist">To Waiting List</label>
</div>
<div class="redo__input-label">
<input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-artworkedit" value="2" class="ng-pristine ng-untouched ng-valid" name="50">
<label for="redo-artworkedit">Artwork Edit</label>
</div>
<div class="redo__input-label">
<input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-print" value="3" class="ng-pristine ng-untouched ng-valid" name="51">
<label for="redo-print">Straight to Print</label>
</div>
</div>
</div>
<ul class="job-item__redo">
<li class="redo__qty">
<label for="redo-qty-item-1">Quantity</label>
<select style="min-width: 100px;" ng-model="redoItem.RedoQty" ng-options="quantity as quantity for quantity in vm.sendRedoRequestCtrl.getReoJobQuantity(redoItem.Quantity)" class="ng-pristine ng-untouched ng-valid"><option label="1" value="number:1">1</option></select>
</li>
<li class="redo__category">
<label for="redo-category-item-1">Redo Category</label>
<select chosen="" data-placeholder="Select redo category.." data-ng-model="redoItem.SelectedCategoryId" data-ng-options="p.Id as p.Name for p in vm.sendRedoRequestCtrl.viewModel.listRedoCategories track by p.Id" data-ng-change="vm.sendRedoRequestCtrl.changedRedoCategory(redoItem)" class="ng-pristine ng-untouched ng-valid ng-isolate-scope" style="display: none;"></select><div class="chosen-container chosen-container-single" style="width: 100%;" title=""><a class="chosen-single chosen-default"><span>Select redo category..</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div>
</li>
<li class="redo__reason">
<label for="redo-reason-item-1">Redo Reason </label>
<!-- ngIf: !redoItem.isLoaded --><select style="width: 80%; display: none;" chosen="" data-ng-if="!redoItem.isLoaded" data-placeholder="Select redo reason.." data-ng-model="redoItem.selectedReasonId" data-ng-options="c.Id as c.Name for c in redoItem.listRedoReasons" class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope"><option label="Bad gluing" value="number:50">Bad gluing</option><option label="Bad cutting" value="number:51">Bad cutting</option></select><div class="chosen-container chosen-container-single" style="width: 100%;" title=""><a class="chosen-single chosen-default"><span>Select redo reason..</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div><!-- end ngIf: !redoItem.isLoaded -->
</li>
</ul>
</div>
<!-- ngIf: $index > 0 -->
</li>
</ul>
</div>
</div>
</div>
<!-- end ngIf: vm.viewModel.redoPoup === true -->

Your XPath expression seems incorrect since no wildcards are provided. You can try to add some sleeps to your script.
WebElement element = driver.findElement(By.xpath("//*[#class='redo__reason']//*[contains(#class, 'chosen-container')]"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
Thread.sleep(5000);
Driver.MoveToElement(element);
Thread.sleep(5000);
Driver.Click(element);
Something like with "Expected conditions" is probably more elegant :
new WebDriverWait(driver, TimeSpan.FromSeconds(5)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//*[#class='redo__reason']//*[contains(#class, 'chosen-container')]"))).Click()

Create a bookmark between 2 different views in MVC

I have two views; Index and Giftworx. In the Index I have icons and when each is clicked it should direct user to a specific point in the GiftWorx page. I've tried the below code but it didnt work. Any help would be appreciated.
Index View:
<div class="col-md-4 w3_agileits_features_grid">
<div class="agileits_w3layouts_features_grid">
<div class="col-xs-4 agileits_w3layouts_features_gridl">
<div class="agile_feature_grid">
#* <i class="fa fa-gift" aria-hidden="true"></i>
</div>*#
<i class="fa fa-gift" aria-hidden="true"></i>
</div>
</div>
<div class="col-xs-8 agileits_w3layouts_features_gridr">
<h4>Who uses GiftWorx</h4>
<p>See who uses GiftWorx and more.</p>
</div>
<div class="clearfix"> </div>
</div>
</div>
GiftWorxView
<div class="why-convertible-box" id="GiftWorxUsers">
<div class="container" id="GiftWorxUsers">
<h1>Who uses GiftWorx<i class="fa fa-question-circle"></i></h1>
</div>
</div>
<div class="hoc container clear" id="GiftWorxUsers">
<div class="row">
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" style="height:auto;" src="~/Content/myTemplate/Logos/1.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/17.jpg" />
</div>
</div>
<div class="col-md-2" style="padding: 2px;">
<div style="border: lightgrey solid thin; border-radius: 2px">
<img class="img-responsive" src="~/Content/myTemplate/Logos/15.jpg" />
</div>
</div>

This is a little bit tricky but should work fine. First I declare the variable with concatenated section of your page:
#{
var strLink = Url.Action("GiftWorxUsers", "GiftWorx") + "#GiftworxArea";
}
Then on your Index View, put this on your a href link:
<div class="agile_feature_grid">
<a href='#strLink'>
<i class="fa fa-gift" aria-hidden="true">
</i>
Link text here
</a>
</div>
Make sure you have an area in your View of Giftworx which has a name in this example: Giftworx by adding this piece of code:
<a name="GiftworxArea"></a>
<div class="col-md-4 w3_agileits_features_grid">
//Other stuffs here
</div>
Now when you click on that link, you will be directed on your page on that exact spot with a section name GiftworxArea.

css center two inputs in a div

Why won't these buttons center and side-by-side?
These stack side-by-side but all the way to the left.
And the red border is a 2px solid line. The button seems to be directly under the red border line. The buttons should be in the border.
I can get the buttons to center, but then they stack, one on top of the other.
I either get one stacked on top of the other and centered
-or-
side-by-side and all the way to the left.
Another note, if it matters. This is on a cshtml c#.net page that includes bootstrap inside the:
#using (Html.BeginForm("frmUpdate", "Mdl", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
. more of the page added below for clarity
<div style="float:left; width:100%;">
#using (Html.BeginForm("frmUpdate", "Mdl", FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
<div style="float:left; width: 50%; border:1px solid black;">
.. left half ~ numerous controls ....
</div>
<div style="float:left; width: 50%; border:1px solid red;">
.. right half ~ numerous controls ...
</div>
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
<div style="float:left; position:relative">
<input type="submit" value="Save" />
</div>
<div style="float:left;">
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
</div>
}

You can use FlexBox to center elements inner other element.
Set at parent display: flex; flex-direction: row; justify-content: center, and sons centers automatically
<div style="display:flex; justify-content:center; width:100%; border:1px solid red; text-align:center;">
<div>
<input type="submit" value="Save" />
</div>
<div>
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
</div>

Because you are using floats, the parent doesn't pay attention to the height of the buttons. So your 2px red line is just the border around a 0 height div.
Do you need to use floats? If you just make the divs display:inline-block you can solve the height and centering.
<div style="width:100%; border:1px solid red; text-align:center;">
<div style="display:inline-block">
<input type="submit" value="Save" />
</div>
<div style="display:inline-block">
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
https://jsfiddle.net/hy9nswyg/

You can simply remove them from their floating divs, as the floating block elements are messing up your centering, here.
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
<input type="submit" value="Save" />
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>

Dont know which one actually correct for you live fiddle
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
<div style="display:inline-flex; ">
<input type="submit" value="Save" />
</div>
<div style="display:inline-flex; ">
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
</div>
<div style=" margin:20px;"></div>
<!--only for space -->
<div style="clear:both; width:100%; border:1px solid red; text-align:center;">
<div style="display:inline-flex; ">
<input type="submit" value="Save" />
</div>
<div>
<input type="button" value="Cancel" onclick="window.history.back()" />
</div>
</div>

At the end of the day Alejandro's is the most succinct. All answers are appreciated and all are very nearly the same. Any down sides to Alejandro's? I made both the left & right of the top page portion statically height setting (didn't really want to but was compelling) and some padding. how looks just about as i wanted.