I am building a Chrome Web Extension that hides parts of Youtube's home page at the click of a button.
I am trying to hide CSS elements after the webpage loads after clicking a button on my Chrome extension's popup.
I am not able to use inline CSS and must use javascript due to chrome's security protocols.
when I click the button on the popup, I received the following error: "Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')"
HTML:
<button id="hideRecommended">Hide Recommended</button>
Javascript:
let homePage = document.querySelector(".style-scope.ytd-rich-grid-renderer#primary");
document.querySelector(".hideRecommended").addEventListener("click",showHideHomePage);
function showHideHomePage(){
homePage.style.display="none";
}
I am not sure what I am doing wrong. Any input would be GREATLY appreciated. Thank you for reading
Since you are define the button by id as follows
<button id="hideRecommended">Hide Recommended</button>
So change
document.querySelector(".hideRecommended").addEventListener("click",showHideHomePage);
To
document.querySelector("#hideRecommended").addEventListener("click",showHideHomePage);
Note:
.hideRecommended measn select by class
#hideRecommended means
select by id
Related
I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks
Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");
Im trying to find a selector to the following button:
Inspecting Button
I need this for a Puppeteer headless chrome task.
e.g.: await page.waitForSelector(The selecor comes here);
The site: https://www.notebooksbilliger.de/
The button appears after adding a random product to cart and then redirect to: https://www.notebooksbilliger.de/kasse/anmelden
Would appreciate some help, wasted many hours trying to solve this :)
Since, there is no specific id to select. Here I'm trying with href attribute.
buttons = document.querySelectorAll("a[href='https://www.notebooksbilliger.de/kasse/unregistriert']");
Now, you can do any script work with
buttons[0]
I'm trying to make an application to change SSID and password more easily using webview with react native. But when i get to apply the changes one popup shows up . I don't know how to get the id from popup's button. I'am using getelementbyid for other elements.
Edit: i found this post in stack where he changes the script inside a button. But i don't know how to do this when the script is inside a tag :((((
Button:
<button id="btnApplySubmit" name="btnApplySubmit" type="button" class="ApplyButtoncss buttonwidth_100px" onclick="ApplySubmit();">
<script>
document.write(cfg_wlancfgother_language['amp_wlancfg_apply']);
</script>Apply
</button>
I am trying to write an applescript application that logs into a website upon launching. So far I can successfully open Chrome, load the web page into the active tab, select and input the password, but I cannot click the submit button.
Below is the element on the page:
<button type="submit" class="btn btn--ac" alt="Login"
title="Login" tabindex="6"><i aria-hidden="true"
class="lush lush-locked"></i> Login</button>
My skill level in javascript is little to none, yet I cannot find a way to successfully select this item and click it. I have tried already using the TagName and ClassName but it does not work, perhaps my syntax is incorrect. Is there a way to do this without a ID type?
I have tried:
execute front window's active tab javascript
"document.getElementByClassName('btn, btn--ac').click()"
execute front window's active tab javascript
"document.getElementByTagName('button').click()"
I should note this script runs in Google Chrome.
Thanks for any help in advance.
First of all you're using a wrong function. It should be
document.getElementsByClassName
Try using: (Assuming the Submit button is the only button with class btn)
document.getElementsByClassName('btn')[0].click();
Here's basic definition of the function from Mozilla:
document.getElementsByClassName():
Returns an array-like object of all child elements which have all of
the given class names.
Hence, you get a list of elements. Hence, you select the first element in it (using the 0 as index), and then click on it.
The correct syntax in plain js to select an element by his class is:
document.getElementsByClassName('btn--ac');
With this you'll get an array with all elements with the class 'btw--ac'. In your case try this:
document.getElementsByClassName('btn--ac')[0].click();
Hy. I have a problem with selenium IDE. I have a button in a table that I must click on.
Command: click
Target: xpath=//table[#id='mainForm:dataTable']//tr[contains(., 'test1')]/td[9]/div/table/tbody/tr/td[contains(., 'Edit')]/a
When I click the button 'Find' of selenium it show's me the button 'Edit' for the person 'test1' in my table. So selenium finds the button, that means what I write in target must be correctly.
The problem is, if I wanna run the test, selenium says :
[error] Element //table[#id='mainForm:dataTable']//tr[contains(., 'test1')]/td[9]/div/table/tbody/tr/td[contains(., 'Löschen')]/a not found
and I don#t know why.
Please help me with this problem :)
Maybe row where this text has to be present is another than 9 ? maybe try/td[contains(., 'Löschen')]/a if you don't have another td like this on page. Good practice will be sign in some way that element in your server script (for example add rel= or title= or just specific id=) and find that by this parameter.
Try to run test growing this xpath from none, thet you should catch a situation where exactly requested element not exists, like:
//table
//table[#id='mainForm:dataTable']
//table[#id='mainForm:dataTable']//tr
//table[#id='mainForm:dataTable']//tr[contains(., 'test1')]
//table[#id='mainForm:dataTable']//tr[contains(., 'test1')]/td
//table[#id='mainForm:dataTable']//tr[contains(., 'test1')]/td[9]
And so on, until error will appear
Maybe you have some javascripts on page that do modifications in DOM tree