I have tried many options, but not successful so far to click on checkbox that are custom checkboxes with :before tag and are hidden. Can someone show me the way to resolve this issue. I tried X-Path and other selector, it finds and clicks on those checkboxes but those checkboxes don't get checked for some reason.
<fieldset class="checkbox">
<legend>Services</legend>
<ul class="multiColumnList">
<li><label for="AccountUsers_0__ViewOrders"><input data-val="true" data-val-required="The View Orders field is required." id="AccountUsers_0__ViewOrders" name="AccountUsers[0].ViewOrders" type="checkbox" value="true" class="hidden-field"><span class="custom checkbox"></span><input name="AccountUsers[0].ViewOrders" type="hidden" value="false">View Orders</label></li>
Here is the screenshot of HTML
Try to click on the checkbox in the following way:
const checkboxSelector = Selector('#AccountUsers_0__ViewOrders');
const labelSelector = Selector('[for="AccountUsers_0__ViewOrders"]')
await t.click(labelSelector);
await t.expect(checkboxSelector.checked).ok();
If this does not help, let me know. I will find a suitable solution for you.
async Check() {
const checkboxSelector = Selector(`[id="AccountUsers_0__ViewOrders"]`)
.with({visibilityCheck: true});
if(!checkboxSelector.checked){
await t.click(checkboxSelector);
}
await t.expect(checkboxSelector.checked).eql(true, 'Should be checked')
}
async UnCheck() {
const checkboxSelector = Selector(`[id="AccountUsers_0__ViewOrders"]`)
.with({visibilityCheck: true});
if(checkboxSelector.checked){
await t.click(checkboxSelector);
}
await t.expect(checkboxSelector.checked).eql(false, 'Should be unchecked')
}
Please try this code and let me know
Related
I have a form that is passing a string to a search page that uses that string to query an API and display results. When I submit the form, the URL is x/search/string?slug=string. I am looking for a way to keep the URL cleaner and have it be x/search/string.
My form code:
<script lang="ts">
let slug = '';
</script>
<form action={`search/${slug}`}>
<input bind:value={slug} name="slug" type="text" />
<button type="submit" />
</form>
My +page.server.ts code:
export const load: PageServerLoad = async ({fetch, params}) =>{
const fetchSearchResults = async (slug:string) => {
const res = await fetch(`https://openlibrary.org/search.json?q=${slug}`)
const data = await res.json();
return {data};
}
return {
results: fetchSearchResults(params.slug)
}
}
The URL x/search/string?slug=string provides the same results as x/search/string but I am positive I am doing something wrong. Any help or links to some examples that would help would be greatly appreciated.
The input in the form is sent as part of the form request, for GET that results in query parameters.
There are multiple options, e.g. remove the name attribute.
You could also move the element out of the form, but I would not recommend that, as it breaks things like being able to press Enter to submit the form.
I write my first *.gs file of Google Ads-script.
Is there any IDE or environment where I can add breakpoints or see the variables state?
I saw only logger printing, but that's not efficient to work with.
I have tried #Andrew's reply, but didn't manage:
You can place dots in next to the line numbers and then click on the little bug icon, like displayed on this image.
This will open this debug screen:
you can use this function.
For example:
MyLogger("test");
function MyLogger(s,d=true,w=800,h=400,t=5) {
const cs=CacheService.getScriptCache();
const cached=cs.get("Logger");
const ts=Utilities.formatDate(new Date(), SpreadsheetApp.getActive().getSpreadsheetTimeZone(), "MM|dd|HH:mm:ss")
if(cached) {
var v=Utilities.formatString('%s<br />[%s] - %s',cached,ts,s);
}else{
var v=Utilities.formatString('[%s] - %s',ts,s);
}
cs.put("Logger",v,t);
//allows logging without displaying.
if(d) {
const a='<br /><input type="button" value="Exit" onClick="google.script.host.close();" />';
const b='<br /><input type="button" value="Exit" onClick="google.script.host.close();" /><br />';
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutput(b+v+a).setWidth(w).setHeight(h), 'My Logger');
}
}
(To view logs open spreadsheet with your script)
I have ASPNETCore application with a model that successfully sends email and returns a message to the browser.
[HttpPost]
public IActionResult Index(IndexViewModel model)
{
if (ModelState.IsValid)
{
try
{
// Send the email
_mailService.SendMessage(model.Email, model.Subject, $"From: {model.Name} - {model.Email}, Message: {model.Message}");
ViewBag.SendMessageClass = "p-3 mb-2 bg-success text-white rounded";
ViewBag.UserMessage = $"Nice to hear from you {model.Name}, your message was sent successfully";
ViewBag.JumpToDivId = "#contact_form";
ModelState.Clear();
}
catch (Exception ex)
{
ViewBag.SendMessageClass = "p-3 mb-2 bg-danger text-white rounded";
ViewBag.UserMessage = $"Whoops {model.Name}, we were unable to send the message, return code was {ex.ToString()}.";
ViewBag.JumpToDivId = "#contact_form";
}
}
return View();
}
After the post, I am trying to scroll back to near bottom of the page where the contact form is to show the message sent feedback. I have tried many examples and all just end up with the page at the top after postback not back to the contact form position. Any help appreciated.
Kind Regards,
Neil
trying to scroll back to near bottom of the page where the contact form is to show the message sent feedback
To achieve the requirement of maintaining the scroll position after the post, you can refer to the following approach to store the scroll position in localStorage while user submitting the form then retrieve it and dynamically reset the scroll position after page reloaded.
Html Code
<form>
input fields here
<br />
...
<br />
<input type="submit" value="Submit" onclick="maintainscrollposition()" />
</form>
JS Code
function maintainscrollposition() {
var y = window.scrollY
console.log(y);
localStorage.setItem('topposition', y);
}
$(function () {
var top = localStorage.getItem('topposition');
window.scroll(0, top);
localStorage.removeItem('topposition');
});
Test Result
I want to keep the value of a variable identical with the content of a textarea.
I don't want to use v-bind or v-model, because I have already bound the textarea with another value.
This is a notebook app, and the textarea is used to display the content of a note, so it has been bound using v-bind with a note object, like
<textarea cols="30" rows="3" v-bind:value="note"></textarea>
Now, I want to add the "edit note" functionality. So when the content of the textarea changes, I want to store its value into a variable, and when the "submit" button is clicked, I pass the value of the variable, which contains the new content of the note, to backend to update the note.
My question is, how to store the textarea's content into the variable after each time the content changes?
I think I cannot use v-model because this way the note will be changed right after the content of the textarea is modified (though not sent to backend), but this is not what I want. What I want is the note to be changed only after the "submit" button is clicked. Thus, I cannot use v-model
Should I use v-on:change? If so, how to get the content of the textarea?
Like,
<textarea v-on:change="updateTheVariable(I need to get the content of the textarea here)"> ... </textarea>
methods: {
updateTheVariable(content of the textarea) {
this.variable = content of the textarea
}
}
Thanks
I'm assuming this thing only shows up when you click some kind of edit button which is why you don't want to alter note so try something like this instead
<button type="button" v-if="!editMode" #click="editNote">Edit</button>
<form v-if="editMode" #submit="handleSubmit">
<fieldset :disabled="saving">
<textarea v-model="editingNote"></textarea>
<button type="submit">Edit</button>
</fieldset>
</form>
export default {
data: () => ({
note: 'whatever', // maybe it's a prop, maybe assigned later, doesn't matter
editMode: false,
editingNote: null, // this will be used to bind the edited value
saving: false
}),
methods: {
editNote () {
this.editingNote = this.note
this.editMode = true
this.saving = false
},
async handleSubmit () {
this.saving = true // disables form inputs and buttons
await axios.post('/notes/update', { note: this.editingNote}) // just an example
this.note = this.editingNote // or maybe use data from the response ¯\_(ツ)_/¯
// or if it's a prop, this.$emit('updated', this.editingNote)
this.editMode = false
}
}
}
As #Phil indicated in a deleted post, the right way to do it is
<textarea #input="updateTheVariable($event.target.value)"></textarea>
.
.
.
methods:{
updateTheVariable(value){
this.variable = value
}
}
I am trying to use puppeteer to type in an input field but I get the following error.
Error: failed to find element matching selector "#cardCvc-input"
My code is:
await page.$eval('#cardCvc-input', e => e.value = "000")
The node in the DOM is as follows:
<input _ngcontent-ng-cli-universal-c1="" autocomplete="off" cccvc="" class="form-control ng-pristine ng-
invalid ng-touched" id="cardCvc-input" maxlength="4" minlength="3" name="cardCvc" pattern="[0-9]{4}|[0-
9]{3}" required="" type="tel">
Hoping someone could help tell me what I am doing wrong. Note that when I check the page source, I don't actually see the DOM. It is a bunch of javascript code. Does that have anything to do with it?
Also noticed that there are iframe parent nodes.
Since the element is in an iframe you need to select the iframe first and then select the element:
await page.waitForSelector('iframe'); //make sure you use the correct selector for the iframe
const iframeElement = await page.$('iframe'); //make sure you use the correct selector for the iframe
const frame = await iframeElement.contentFrame();
await frame.waitForSelector('#cardCvc-input');
await frame.$eval('#cardCvc-input', e => e.value = "000");
You can add a waitForSelector before calling evaluate. So you would wait for that DOM element to be created by the javascript code.
await page.waitForSelector('#cardCvc-input');
await page.$eval('#cardCvc-input', e => e.value = "000")