How to write a script to detect active buttons on a website? - javascript

I am trying to find out a way to write an external script that will run on my computer and preform a specific action. The script needs to access my google chrome, a specific tab, and check the code of the website for a button property change. Ones the button's property changes i want the script to press the button. I am sure that the detection itself is easy, I'm just not sure how to write an external scrip that will access Chrome.

If you want an outside code to do things for you (read, automate), and you are trying to do it on a website, I suggest looking into Selenium.

After reading the comments i came to the conclusion you just want your button to be clicked when it hits 0 (which it seems you have already done) if that is the case: (sorry if read it wrong question is not very clear)
you can use 2 different ways one is
javascript
var l = document.getElementById('your-button-id');
l.click();
another is using the trigger functionality with jQuery
$(document).ready(function(){
$("yourbuttonid").trigger("click");
});

Related

How do I make specific inputs go into another .html file in the project?

I wanted to make specific inputs go into another part of a site (e.g. https://myexamplesite.com/anotherpartofit.html)
And also make those specific inputs be the ones that someone saved it in.
An example of what I think would work is: Get value from input 1 from /apartofit.html and put it in input 2 at /anotherpartofit.html and make it non-editable
If it needs to use a database, I would prefer if you could help me with firebase (Google's Database). But in my knowlege, it probably needs to use javascript, so I'll be tagging it, if it doesn't, let me know!
in visual studio or notepad or every offline web creating spaces you can't but if you buy a domain or simple , online site , you have to crate a page and get the link of that page then open another page create a button set the button's href to link of pervious page finally hit the button !

Cypress loads wrong page after click

I have my website set to a foreign language so that when Cypress clicks on the contact button or any button with href tag on my website, it should have sent me to the foreign version of that page but instead, it sends me to the english one. I cannot replicate this when I try to do it by hand.
I'm testing my website, salaenrollment.com, to make sure that if I switch the language on the website to a foreign language, it doesn't switch back when I click around to the contact and such.
cy.visit('https://salaenrollment.com/')
cy.contains('ភាសាខ្មែរ').click()
.url().should('include', '/kh')
cy.contains('ទំនាក់ទំនង').should('have.attr', 'href', '/kh/contact')
.click()
Everytime I test it with cypress, the language always switches but when I try to replicate it manually, I can never get it to switch. I wrote the code on cypress as simple as possible and I manually set wait times in the code but nothing works. About 90% of the time, when I test with cypress, the language doesn't switch. There is nothing wrong with the website and there are no errors.
What should happen is that cypress will enter the website, change the language, click on the contact button and the contact page will be in the foreign language. The cypress test should match a manual test.
probably you need to add some waiting time because your page its reloaded after switching the language maybe you need to check if your element already appear in the Dom with should('be.visible') this will add some waiting time by trying to check if the element is ready .
cy.visit('https://salaenrollment.com/')
cy.contains('ភាសាខ្មែរ').click()
.url().should('include', '/kh')
cy.contains('ភាសាខ្មែរ').should('be.visible')
cy.contains('ទំនាក់ទំនង').should('have.attr', 'href', '/kh/contact')
.click()
your selectors is also wrong please try this (it works in my local setup):
cy.visit('https://salaenrollment.com/')
cy.get('.language').click()
.url().should('include', '/kh')
cy.get('.language').should('be.visible')
cy.get('.contact ').should('be.visible')
cy.get('.contact ').should('have.attr', 'href', '/kh/contact')
.click();

JavaScript - Selenium Webdriver. How to check if element is visible

Im using Selenium to open a page. After I open the page, I want to click a some sort of refresh button. When I click it, Im getting this error:
ElementNotVisibleError: element not visible
This is the code I use to click the button:
driver.findElement(By.id(id)).click();
My guess is that the button goes not visible whenever it is pushed. And that maybe it starts off not visible as well. Cause it doesnt do a full page refresh.
Any way for selenium to check if something is visible, and maybe wait until it is?
Edit:
As it turns out, there are multiple buttons with the same ID. And the button I am trying to reach are way down. I tried to find the button with By.xpath, but I still couldnt find it. The way I did it, was to search for button by id, like this //button[contains(#id, 'abc')][1]. (Different number of course).
Selenium could not find the element, but I could find it with Chrome developer tools. Any suggestions?
Solution: 1 You can try using this code in a syso,
System.out.println("getting Page Source "+driver.getPageSource());
This method will return the entire page Source and you can check whether your button exists in the source or not. You can place the above code at several points in your function and check until you find the button in the source.
Solution: 2 In case your button does not exist in the source you will have to check and see whether the button is getting loaded in an iframe and if so you can use the following code and switch to the iframe and and then try finding the button,
driver.switchTo.frame(frameName);
In your case you could use Explicit wait to check when the element/button is clickable.
Try doing this
wait.until(ExpectedConditions.visibilityOfElementLocated(id))

Redirect on page reload jQuery

I need create probably an uncommon thing, so I haven't found any guide, and thats why I would like to ask here:
I am creating an interface for a site, which is being created by ajax loading its parts.
My web interface can accept an URL parameter as an input. If there is the parameter, my site changes its behavior (loads the page + content by value of that parameter and show it at specified place).
But, at some point, I have to get rid of the parameter.
Especially, if someone reloads the page, I want to show the cleanly loaded web page, not the content - but the parameter is still there whie pressing F5
So, my code - which is not working, looks simply like that:
//EDIT: Thanks to #charlietfl. I have here an unload event, which figures in ways like "I want to go to another page by url adress bar"
Same problem, jsut need to change it just and only to RELOAD page event.
//we are here: http://example.com/?docId=1
$(window).bind('beforeunload',function(){
//window.location.replace("http://example.com");
window.location.href = "http://example.com";
});
Know two things:
1) $(window).bind works well, with simple alert in it.
2) window.location.replace("http://example.com"); works well too, if fired at some other event, like key press (for my testing)
What I am trying to achieve, is to "skip" the reload by redirecting.
Aaaand one more thing. I know about HTML5 syntax changing the url without reloading the page (change->reload->done), but I can't use it, because of compatibility needed with older browsers.
Well, plase, any tips? Thanks in advance :)

How can I make modifications to an HTML form that is automatically generated?

I'm creating a webform using a marketing automation platform. I want to add a field that functions with jquery to do an autocomplete. Unfortunately, the forms are generated through a WYSIWYG editor in the software, and then generated and put into the page when it renders. The only code for the form that appears in the HTML for the page is a simple variable placeholder - %%FORM::DEFINITION%% - which is then replaced with the form code when you visit the URL. The software support team tells me that making the change I want to make is impossible, which I see as a challenge.
The only thing I need to be able to do is add an id="autocomplete-dynamic" attribute to the input on the form. I had two ideas how I could achieve this.
The first, and most preferable option, would be some script that runs at the bottom of the page that simply inserts the attribute into the input tag after the page renders out. This would only be a client-side change, but since all this does is make the text field capable of looking up values out of another table, it should be fine. If someone had a script blocker in place, they would not be prevented from typing into the text field normally, it's just that the auto-lookup wouldn't work. We're trying to make it easier to select an item from a list of thousands of possibilities, but if someone had to type in their own entry without the autocomplete, it would not be a disaster. This seems like a clean solution, but I am not sure if it can be done.
The other possibility is to get the form code out of the software and embed it in a separate HTML document, and make the change there. You can extract the raw HTML for the form for use on another page, but pasting this code right back into the landing page causes errors. So, the thought then was that if I have taken the code generated by the software and put it in an HTML page on a separate web server, I could modify it as needed, and then turn around and use an iframe to stick it right back in the landing page. The software shouldn't complain because the form is being used on an external site like it's supposed to be... I have just hidden that external site back inside the platform-hosted page.
Option 1 would still be much easier to implement, I think, provided it is actually possible.
Thanks in advance.
Your first solution seems completely appropriate.
$(function() {
$('#myForm input').attr('id', 'autocomplete-dynamic');
});
This can be added anywhere inside a script tag because it's wrapped in a shorthand document.ready function, which waits to run until the DOM is ready.

Categories