I'm not extremely familiar with puppeteer and node.js but need to do this ...
Need to click on button which has span element. Button and span doesn't have ids, classes are changed with every page load. Only what is certain is text "Login" inside span element.
Button type is submit and I can find it thru that but submit doesn't run all js on that button like with click.
<button class="But_case_8U1 Log_but_dCL">
<span class="ButChild_3Jw">Login</span>
</button>`
I tried watch some tutorials and examples but all puppeteer and node.js examples are simpler than my problem.
You can use The Login text if you have only one element button with text Login in you page like this:
const [button] = await page.$x("//button[contains(., 'Login')]");
if (button) {
await button.click();
}
Related
I'm trying to make my first vanilla JavaScript app which is (surprisingly :D) To-Do App
I'm currently stuck with the update todo part,
I got this part of code doing to-do creation
let createTodo = (todo) => {
let span = document.createElement('span');
span.classList.add('text');
spanParent.prepend(span);
span.innerHTML += `${todo.text}`;
let edit = document.createElement('span');
edit.classList.add('edit');
spanParent.append(edit);
edit.addEventListener('click', (e) => {
console.log(e);
});
let editIcon = document.createElement('i');
editIcon.classList.add('fa-solid');
editIcon.classList.add('fa-pen-to-square');
edit.prepend(editIcon);
};
I want that when user click edit the todo text turn to editable input and save new value on enter or clicking outside and it become not editable again until pressing edit
I did some research and come across (contentEditable) attribute , but when tried to apply it things went sideways,
when i turn it on the edit icon disappear and the text stay editable
i think i need to do some kind of form that show on edit but don't know how to approach this idea
EDIT
I'll try to explain more clearly hopefully,
I need to make the to-do text to be:
1- editable when user click the edit button
2- save the new user input text
3- become non-editable once user save updates
4- become editable again if user press edit button again
Thanks in advance
Based on the description that you provided, there is technically no need of using a form. You could stick to a standalone button and give it a click handler.
The click handler of this EDIT button works as follows: it sets the contenteditable attribute on the to-do text element (the span element above). This makes the text editable.
Then when the SAVE button is pressed, you should do the following: get the textContent of the span element, store it locally (I guess you're using localStorage) and then finally remove the contenteditable attribute from the span element.
BTW, I feel that there is a lot of room of improvement in your code, for e.g. in variable naming, in the usage of methods, and in the order of statements:
append() and prepend() is, more or less, meant for bulk-insertion of nodes into the DOM. In your case, you have just one single node to add and so you could just stick to using insertBefore() or `appendChild().
Most probably, the to-do text is styled as a block in your application. Hence, it's better to make it a <div> element, instead of a <span>.
There is an awesome resource to learn about the HTML DOM, along with exercises to practice your skills: HTML DOM Introduction — CodeGuage.
I am trying to make element lets say button active on page open. By active I mean when u pressing tab buttons elements, tabs and stuff us getting active one after one. But how can I achieve that element is selected defaulty on page start.
Try using:
element.focus();
Link to javascript documentation
All HTML elements have a Boolean attribute autofocus. It does not only work on form elements such as buttons, input fields, dropdowns, but also on focussable elements like <div contenteditable="true">.
I have button which is created using JavaScript
const deleteButton = document.createElement('button')
I want to append the delete/trash Icon, the below code is working
deleteButton.classList.add('far', 'fa-trash-alt')
but the Thing is I only want to append the icon only, rather then a button, can anyone know how we can do it, but catch is it should be button because the button has assigned to function
You can create a span instead a button, try this:
let deleteSpan = document.createElement('span');
deleteSpan.classList.add('far', 'fa-trash-alt')
I don't know how to click on a button that has no id or value.
I've already tried using the xpath and selector paths but neither worked for me.
<div class="button js-vehicle-section-next full-width mb1">Next Step: Select a Repair</div>
Is the code for the button on the site. My current attempts are.
find('js-vehicle-section-next').click
click_on('js-vehicle-section-next')
find_all(:xpath, "//*[normalize-space(text())='Next Step: Select a Repair'").first.click
The expected result is that the button will be clicked
click_on clicks link or button elements so it’s not going to work here because you are trying to click a div. Instead you can just use a valid CSS selector and call click on the returned element
find(‘.button.js-vehicle-section-next’).click
If you didn't have a specific class for the next "button" and you needed to do it by the contained text you could do
find('div.button', exact_text: 'Next Step: Select a Repair').click
I'm trying to improve the accessibility of a button which tests a connection. If the connection is successful, the button text changes to 'Success'. If not, it changes to 'Not Working'. They look something like this:
<button aria-label="success">Success!</button>
<button aria-label="failure">Not Working</button>
I'm trying to find a way to alert the user of the content change of the button. So far, I've added aria-labels to read the 'success' or 'not working' title, but these are only read to the user if the user tabs/moves away from the button and then back onto it after the status has changed.
I've also tried wrapping the button's text in a <span> with a role="alert" in hopes that would notify the user that the text has changed, but no luck there either:
<button aria-label="failure"><span role="alert">Not Working</span></button>
I've also tried wrapping the button in a <div aria-live="polite"/>, but I have suspicion that this isn't working because no new elements are being added to the page, but rather the content of the elements has changed.
What's a good way to alert users of dynamically changed text content?
Thanks!
You were close with your attempts. You can have use aria-live and is the most appropriate solution. You don't have to add elements to the DOM for aria-live to work. Changing the text of an element is sufficient if you're using the default aria-relevant value. (If you don't specify aria-relevant, you get "additions text" as the default value.)
But you have to put aria-live on the element that is changing. In this case, the button itself. I tried the following and it worked just fine:
<button onclick="myclick6()">change it</button>
<button id='livebutton' aria-live="polite">Success!</button>
function myclick6() {
document.getElementById("livebutton").innerHTML = "Not Working";
}
Just Create simple div with display none.
<div id="dynamicText" aria-hidden="true" aria-live="assertive" style="display:none"></div>
After that dynamically append the value inside the above div.
$('#dynamicText').html('Success');
Or
$('#dynamicText').html('Not Working');