We Keep Coding

The drop down element is not locating

Requirement : Click on the drop down and the drop down should open.
DOM:
<span class="select2 select2-container select2-container--default select2-container--below select2-container--open" dir="ltr" data-select2-id="3522" style="width: 208.328px;" xpath="1">
<span class="selection">
<span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-disabled="false" aria-labelledby="select2-_ID-container" aria-owns="select2_ID-results" aria-activedescendant="select2_ID-result-pwlg-2">
<span class="select2-selection__rendered" id="select2_ID-container" role="textbox" aria-readonly="true" title="Choose Inco Term">Choose Inco Term</span>
<span class="select2-selection__arrow" role="presentation">
<b role="presentation"></b>
</span>
</span>
</span>
The element is located on the UI:
But when I use the same id on the code as below:
cy.get('#select2_ID-container').click({force:true})
Then I get the following error:
Timed out retrying: Expected to find element: #select2_ID-container, but never found it.
I also tried {force: true}:
cy.get('#select2_ID-container').click({force:true})

There is a different id shown above, perhaps you want
cy.get('[id="select2_ID-container"]').click()

Perhaps you are looking for role="combobox", since this is likely to be the dropdown.
cy.get('span[role="combobox"]').click({force:true})

#select2_ID-container is the selector for the first option in the dropdown list which is Choose Inco Term. You can use this to open the drop down.
cy.get('[aria-owns="select2_ID-results"]').click()
OR
cy.get('[aria-activedescendant="select2_ID-result-pwlg-2"]').click()
Or, You can also use the text to find and click.
cy.contains('Choose Customer').click()

The jQuery select2 has a visible textbox which can be clicked to show the options.
If you're having trouble with the ID, this is how I would approach the test
cy.get('.select2 [title="Choose Inco Term"]')
.as('select2') // alias the textbox
.click() // open the options list
// Options now open
cy.contains('li.select2-results__option', 'TextOfOption').click() // choose an option
// Verify
cy.get('#select2')
.find('li.select2-selection__choice') // choice is listed under textbox
.should('contain', 'TextOfOption') // check the text
// Remove
cy.get('#select2')
.find('.select2-selection__choice__remove') // remove button
.click()
cy.get('#select2')
.should('not.contain', 'TextOfOption') // check text has gone

Sometimes cypress requires a mouse move. Try this too:
cy.get('[id="select2_ID-container"]').trigger('mousemove').click()
Also make sure the element is present / not timedout by checking the command logs : https://docs.cypress.io/api/commands/click#Command-Log

Finally I found a solution to this. I tried all of the above solutions, but neither worked for me. This was due to the version issue. I simple updated the Cypress to the latest version 10.0.1 and ran the test and it worked. Also the dropdown is not located because the page was not loaded properly. The click action was performed on the automation before the page loads completely. So I added cy.wait(10000) before clicking the dropdown. I think the version is not the main problem. The main problem is the page load.
Thank you all for your time. :)

AppleScript cannot click input tag to add file

I am trying to use applescript to add a file to a website's input field.
This is my code so far:
set ClickInput to "var myInput = document.getElementByClassName('jsx-1828163283 upload-btn-input')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
set ClickInput2 to "var myInput = document.getElementsByName('upload-btn')[0]; myInput.dispatchEvent(new MouseEvent('mousedown')); myInput.dispatchEvent(new MouseEvent('mouseup'));"
activate application "Safari"
tell application "Safari"
open location "https://www.example.com/upload"
set theTab to tab 1 of window 1
-- wait until page loads
repeat while document 1's source = ""
delay 0.5
end repeat
-- do JavaScript ClickInput in theTab
do JavaScript ClickInput2 in theTab
delay(5)
close theTab
end tell
Here is the HTML around the input element I want to select:
<div class="jsx-3758851661 upload">
<div class="jsx-1828163283 upload-btn">
<div class="jsx-3758851661 card stage-1">
<div class="jsx-3758851661 text-main">Select video to upload</div>
<div class="jsx-3758851661 text-sub text-sub-margin">Or drag and drop a file</div>
<br class="jsx-3758851661">
<ul class="jsx-3758851661 text-sub">
<li class="jsx-3758851661">MP4 or WebM</li>
<li class="jsx-3758851661">720x1280 resolution or higher</li>
<li class="jsx-3758851661">Up to 60 seconds</li>
</ul>
</div>
<input type="file" name="upload-btn" accept="video/mp4,video/x-m4v,video/*" class="jsx-1828163283 upload-btn-input">
</div>
</div>
The way the site works is you click the outermost div <div class="jsx-3758851661 upload"> and the safari file finder pops up and you select what file you want.
I have tried clicking the divs outside of the input tag and I have tried clicking the input tag by itself.
I tried to do this by selecting the classnames of the divs and the input tag
I also tried to do this by selecting the input tag by its name and clicking on that
None of these worked.
Im not sure if it clicked but none of these made the file finder pop up
Do you guys have any ideas? Let me know if you would like some clarification. thanks!

figured out set ClickInput to "document.getElementsByName('upload-btn')[0].click();" works !

getElementsByName isn’t a function that I’m aware exists as standard, so you probably want to use getElementsByClassName or querySelector.
The input element has two class names, of which I’m going to choose ”upload-btn-input” in my example below:
tell application id "com.apple.safari"
open location "https://www.example.com/upload"
tell document 1
repeat while the source = ""
delay 0.5
end repeat
do javascript "document.querySelector('.upload-btn-input').click();"
end tell
end tell
If you can provide the actual URL of the page in question, this would allow me to refine this answer to ensure it’s appropriate for what you’re trying to do.

Add popup based on class (most likely)

I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.
The code looks roughly like this:
<div class="entry-controls hide-if-collapsed hide-if-replying">
<div class="notification" data-bind="notification"></div>
<a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
<i class="icon-replied"></i>
<span aria-hidden="true">Reply</span>
<span class="screenreader-only">Reply to Comment</span>
</a>
</div>
The JS code I'm trying to add is:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Popup text here");
})
})
In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.
I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.
Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.

This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.

Javascript.. Disable a #div using pure JS?

I've searched stackoverflow and gone through many pages deep in google. Nothing helped me to disable my button. So I come here wishing someone can help me.
Here's the button I'm trying to disable.
EDIT: This is different than the surposed dublicate as you said yourself, this is a div with a link and not a button.
<div class="de elBTN elAlign_center elMargin0 ui-droppable de-editable" id="button-80437" data-de-type="button" data-de-editing="false" data-title="button" data-ce="false" data-trigger="none" data-animate="fade" data-delay="500" style="margin-top: 30px; outline: currentcolor none medium; cursor: pointer; display: block;" data-elbuttontype="2" aria-disabled="false" data-element-theme="customized">
<a href="#" class="elButton elButtonSize1 elButtonColor1 elButtonRounded elButtonPadding2 elButtonCorner3 elBtnHP_25 elBTN_b_1 elBTNone elButtonBlock elButtonFull elBtnVP_5 elButtonShadow5 elButtonTxtColor1 de1pxLetterSpacing no-button-effect" style="color: rgb(255, 255, 255); background: rgb(1, 116, 199);; font-size: 20px;" data-show-button-ids="tmp_paragraph-42317,headline-29302" data-hide-button-ids="headline-71892,button-80437" id="undefined-503">
<span class="elButtonMain">YES</span>
<span class="elButtonSub" style="font-size: 14px;">I Understand</span>
</a>
</div>
This is what I'm trying to do.
ver = iOSversion();
if (ver[0] <= 11.4) {
alert('Your OS is below 11.4, please use a different device.');
document.getElementById('button-80437').disabled = true;
}
function disableEnable(elems, isDisabled){
for(var i = elems.length-1;i>=0;i++) {
elems[i].disabled = isDisabled;
}
}
tried with these aswell.. nothing.
var div = document.getElementsById("button-80437");
disableEnable(div.getElementsByTagName("button"), true);
EDIT: Thanks for your answers. I appreciate it. Unfortunatly there isn't much I can do to change it to a button as its made using a wysiwyg "clickfunnels".
Maybe I could do this instead.
How do I disable a href link in JavaScript?
Inject href="javascript: void(0)" ?

The div element does not have a disabled attribute. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
If you use a button instead, you would be able to set the disabled attribute to disable the button. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
It looks like you might be using a framework that wants you to disable buttons in a different way. It would help if you included that information.

i got what you are trying to do.So listen
1) "disabled" works on Buttons
2) What you have is "not a button" but "a hyperlink inside div"
3) so what can you do?
you got to play with the styles to show that your "joker button" is disabled
if( version < 11.4 ) {
// make element div style looks like its disabled
// <a href="#">
}
else{
// make element div style looks like it is active
// <a href="<your-link-url>"
}

Like Jorge said, the main problem in your code is you’re trying to disable a non-formelement.
You can either:
Disable the <div> you have by putting the CSS pointer-events: none on your HTML-element *
Change your <div> into a <button> (which is a form-element) and use your current approach (setting the disabled property in Javascript)
* You can find browser-support information on pointer-events here: https://caniuse.com/pointer-events

Is there a way to get a <button> element to link to a location without wrapping it in an <a href ... tag?

Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?
Button currently looks like:
<button>Visit Page Now</button>
What I would prefer not to have:
<button>Visit Page Now</button>
The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.
Looking forward to hearing some options/opinions.

Inline Javascript:
<button onclick="window.location='http://www.example.com';">Visit Page Now</button>
Defining a function in Javascript:
<script>
function visitPage(){
window.location='http://www.example.com';
}
</script>
<button onclick="visitPage();">Visit Page Now</button>
or in Jquery
<button id="some_id">Visit Page Now</button>
$('#some_id').click(function() {
window.location='http://www.example.com';
});

Here's a solution which will work even when JavaScript is disabled:
<form action="login.html">
<button type="submit">Login</button>
</form>
The trick is to surround the button with its own <form> tag.
I personally prefer the <button> tag, but you can do it with <input> as well:
<form action="login.html">
<input type="submit" value="Login"/>
</form>

Just do this
<button OnClick=" location.href='link.html' ">Visit Page Now</button>
Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.

LINKS ARE TRICKY
Consider the tricks that <a href> knows by default but javascript linking won't do for you. On a decent website, anything that wants to behave as a link should implement these features one way or another. Namely:
Ctrl+Click: opens link in new tabYou can simulate this by using a window.open() with no position/size argument
Shift+Click: opens link in new windowYou can simulate this by window.open() with size and/or position specified
Alt+Click: download targetPeople rarely use this one, but if you insist to simulate it, you'll need to write a special script on server side that responds with the proper download headers.
EASY WAY OUT
Now if you don't want to simulate all that behaviour, I suggest to use <a href> and style it like a button, since the button itself is roughly a shape and a hover effect. I think if it's not semantically important to only have "the button and nothing else", <a href> is the way of the samurai. And if you worry about semantics and readability, you can also replace the button element when your document is ready(). It's clear and safe.

Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,
#btn {
background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
display: block;
width: 128px;
height: 128px;
border: none;
outline: none;
}

You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go' into its onclick handler. This does not work without javascript enabled though.
Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.
(actually, forget the second solution - if you can't use a form, the submit button is out)

<form action="portfolio.html">
<button type="link" class="btn btn-primary btn-lg">View Work</button>
</form>
I just figured this out, and it links perfectly to another page without having my default link settings over ride my button classes! :)

Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/
<button id="x">test</button>
$('#x').click(function(){
location.href='http://cnn.com'
})

Assuming that in your HTML file you've a button with id="Button", In the script.js(your script file), you can use this way:
document.getElementById("Button").addEventListener("click", gotoUrl);
function gotoUrl() {
window.location.assign("https://www.google.com/");
}
Now the button will lead you to Google!
For more info: https://www.w3schools.com/js/js_window_location.asp

You can also try this<button type=“Submit”><a href=“”>#</a></button>