Develop Reference

Weird button behavior while scrapping bet365

I am trying to scrap odd data by Pyppeteer from bet365 follow their UI flow and need for help.
The pages are just like this.
https://www.bet365.com/#/AC/B1/C1/D8/E123540970/F3/
If the match is outdated, just get into one of the matches that not in-played from following.
https://www.bet365.com/#/AS/B1/
For the collapsed button named "Handicap Result" at the bottom of the page, I can normally use my mouse cursor to click on it and make it expand and retrieve its data.
But when I tried to use Pyppeteer's click or javascript to do it, that is querySelector() and click(), it just weirdly failed.
Observing html and xhr after click(), it definitely triggered something and tried to do something, but the content just failed to shown.
I tried to click on different coordinates, key Enter and Space, click with delay, and all failed.
Could someone tell me how could I expand it use javascript?
Was I dissipating wrong events?
Thanks.

This is probably one way they use to avoid scraping.
U tested with pure JS direct from DevTools?
Bet365 its really, really hard to scrape. They use Cloudflare blocking and protection system (including AI to detect autonomous agent like Puppeteer, even if you use stealth mode).

Using button rather than a link for single page web app

I'm creating a web app that has a list of commands that change elements on a single page. The page is 100% dependant on JavaScript. I therefore coded these links as:
Command #1
Doubting that this is semantically correct, I found numerous places stating that I should use a button instead.
This makes sense, but means I have to alter the style of a button to look like a link, which feels hacky. Is this the correct method?

The style you give to the element is irrelevant to whether or not it's semantically correct code, so I wouldn't worry too much about that.
Links are meant to, well, link the user between pages on the web.
HTML Input elements are meant to take user input and do things with them.
Based on this simple heuristic, I'd say go with a button!

The HTML5 spec is pretty clear in that you shouldn't use a:
If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor).
The definition of "hyperlink" is:
These are links to other resources […]
So don't use a for "actions" on your single page web app.
You should go with button or resp. input (I'd say both with type value of button).
If you like to dive into newer HTML5 stuff, take a look at menu and command.
Just to be sure: you shouldn't "enhance" other elements (like span or div) with JS to act like links/buttons. This wouldn't be accessible without further work, if at all.

Both are technically fine to use. For me, if it is a text link, then I'd use the <a> tag and if it is a form button or image, use <button>. That way you are consistent with what the elements intended uses are.

I don't think using links is semantically incorrect. If it makes you feel better, you can style your links as buttons.
Otherwise, if that still rubs you the wrong way, there's nothing wrong with styling a button to look like a link. The functionality of your app should have little to do with how you present your buttons, as long as they do the same thing and fit within your expectations.
As mentioned in the comments, if you wish to use buttons, bear in mind that they style as form elements and can be more difficult that working with an anchor tag.

Generally i prefer using div's for these things. Links come with a lot of inherent browser styling, even more so for buttons. Div's only rule is display:block. So it's saves me some reset css lines. Also it saves me some js code to prevent default behaviour. Add that to the fact that there is no correct semantic choice, then using div's makes a lot of sense.

Is their a way to click on a <a> tag without having to physically click it?

If I see a link referencing to a website or action, is there a way I can make an external program that can click on that tag without physically having to take my mouse and click on the link? I know their are probably programs that can take your mouse pointer and move the pointer and possibly make them click, but I am looking for something that will click a link without having to worry about your mouse moving. Thank You

in jQuery:
$('a.theOne').click();
Selenium is a server-side testing tool the simulates clicks on the client-side for testing purposes.
Also, if jQuery does it then it is possible with regular javascript, but I'm not sure how. A look through the source code should reveal the secret.
According to this article you simply need to call:
document.getElementById('theSubmitButton').click();

You could get the link href and go to it via window.location.assign()

Javascript how do I find what function call resulted in a specific UI event?

I want to find out what triggered an event. Namely, the notification bar on this site stackoverflow.com (the bar that tells you when someone has posted an answer to a question you're writing an answer on. It scrolls down slowly from the top and provides a really nice UI for user notifications. I've seen it work on just about ever page.
I imagine it working something (I need to find its name):
special_notification( message );
In the abstract, how do I go about finding out what the call (function name and arguments) looks like that generates that effect when all of the javascript is minified, and I have no idea what include provided it.

Download and install firebug in Firefox.
Go to the URL you're interested in, and open firebug. You might need to reload the page.
Now click on the little arrow icon on the top right hand side of firebug. This will let you highlight any element on the page and provide the corresponding HTML to that element.
Now that you have the id of the element, you should be able to find it in the javascript code. Even if it's minified, the name needs to correspond the DOM name.

To read minified js, you can use a tool like http://jsbeautifier.org.
Regarding your other concern, you want to listen to all the events on a page and know what triggered them and what is the code executed? is that correct?
Update:
There is no way to listen to all the events. If you really need to, you can set up listeners for every event, but you will still miss the custom events, which i guess are what you are after.
I'd suggest you inspect the code using Firebug to learn how the events are used in each case.
You can also listen to all the DOM Events, in jQuery you will do:
$('body').bind('DOMSubtreeModified', function(e){
console.log('DOMSubtreeModified triggered');
console.log(e); //Firebug console.
});
Where e will hold the event information.
Hope that makes sense.

Stop certain elements from being edited inside a doc having designMode = "on";

I am using an iframe and setting its contendocument.designMode to "on". This allows me to replicate a Rich Text Editor, and achieve much more flexibility in the editing process.
The problem is that I have certain links (test) that are added to the page, and of course these links don't work because i'm in designMode.
At first I thought, well I'll just wrap that link inside another iframe, but still it won't fire the event attached to it.
Is there a way to have certain elements work as they would normally, even though they are inside a designMode="on" document?

Recently had the exact same problem. My solution was to use a div with contentEditable="true" instead of an iframe, which then allows you to set contentEditable="false" on elements within that div.
Not a perfect solution, but gets the job done in my case.

You can place a checkbox to toggle to designmode 'on' and 'off'. To see the action temporarily swich to designMode 'off'. This way you may be able to get the desired behavior of your script.

If you look at google docs, when you focus on the link, they show a small div with different actions for that link.
I guess they have spent already a lot of energy to make it the best they could. So I wouldn't try something different.