A part of the webpage is under closed shadow root mode. How do we automate it through selenium or javascript?
Edit:
we can see the DOM under the shadow in chrome://inspect/#apps. This seems to be the child DOM.
Is it possible to communicate between parent DOM and the above child DOM to perform actions on child DOM when our ShadowRoot DOM is hindering us to automate?
Simple answer: You can't.
More complex answer:
Override the Element.prototype.attachShadow function to override the closed setting and force it to be open.
Or rewrite your components to not use closed. This could be done with the components checking a query parameter and using closed most of the time and open when in testing mode.
UPDATE
A closed component is an attempt to allow the component creator some level of security that no one else can mess up their component. While the developer tools can still see inside, the outside code can't unless the component exposes the shadowRoot in some way.
What a closed component should do, instead of exposing their shadowRoot is to provide enough properties and functions to allow the user of the component to do everything they need.
Think of the <video> element. They have dozens of properties between it and its parent element HTMLMediaElement and dozens of functions and events. The component has everything needed for the users of <video> to be able to do almost anything.
If we write our component in this way then being close should not be an issue.
Sometimes people want to test every aspect of a Web Component, but they should really only focus on the public interface and not worry about the inner DOM.
How do you test an <input> element. Most of the time you set .value = "some value"; or add an event listener on change or input.
As long as your components properly expose everything needed to be able to test them then being close should no longer be an issue.
Related
I was going through Mui's Server-side Rendering DOCS.
And It says to prevent FOUC, we should inject style to rendered HTML on server side.
This was very clear.
But after that, it says "On the client-side, the CSS will be injected a second time before removing the server-side injected CSS."
this is the part I don't get.
why should we inject CSS again on client-side if it's already injected server-side?
Is there any difference between client-side cache and server-side cache?
And what is benefit of doing this?
If I had to guess, it would be that if some new Material UI element appears during runtime, the client needs to be able to handle that. SSR after all is for the initial loading of the page. So basically it is client rerendered to allow being dynamic.
This however creates issues for me personally as well since the new tag overwrites my Tailwind . Am trying to figure out how to render the client version above/before the Tailwind one, hence is why your question popped up on Google.
Edit: If I remember correctly, I solved using emotion; https://emotion.sh/docs/ssr
I recently encountered this on one of my project and I don't think I have the full understanding of this thing at all. The only thing I know are the following:
-That DOM prevents scripts that are loaded on blocking the rest of the page.
-Html files and other page source codes are parsed and turned into DOM, with which, when you inspect it or go to view page source, the DOM format of the code is what it will throw you.
-I was also able to implement DOM on our project through the help of a tutorial.
Now, my questions are:
-Is the code in the devtools the DOM?
-Does DOM adds security features on a system?
-Since DOM was widely implemented in the layout engines of the web browser, is there any other advantages of using DOM aside from it prevents possible blocking of the rest of the codes of the page?
Thanks guys.
The DOM (Document Object Model) is all about the code/object hierarchy within a given system/node. It is symbolic of the branches of an upside-down tree. It forces the different layers of code to always have a parent-child-sibling relationship.Any code inside another block of code is a child of the larger block. For html, the html tag is the parent of all other tags, followed by the head, then body tag. Most all displayed content is in the body section, with one division creating the main page you see. After the division tag you have the ul / li / p / a tags. Sometime the span tag is used as a wrapper for the 'a' or 'p' tags. The 'ul' tag is a child of the div tag it is in, and the 'li' and/or 'p' tag is a child of the 'ul' tag. Only the span tag varies in location when used, depending on its need to keep objects and/or text inline. The lowest possible child (or leaf in a node tree) is either a 'p' tag or an 'a' tag. No other tag can be used inside the 'a' tag. A sibling is referred as a tag or node of the same level in the tree, but in an adjacent div or ul or li tag. Their relationship is not defined normally, unless there is a need to do so. In summary, the DOM is used to insure order and readability in html / XML /SQL and other software systems. It does NOT guarantee good working code by itself, but it sure helps create efficient working code early in the design stage.Also, new coding functions are being employed that can bypass or modify the way the DOM behaves. Angularjs and MEAN, which includes a micro-server and node.js, are trying to turn a clients web page into a de-facto desktop application, such that the request to the server become as minimal as possible. These new functions do not contradict the DOM model, but act as a wrapper so action/editing/motion on a webpage appears instantly without having to contact the main server. During periods of no user action an update is sent to the main server, so the website and the PC stay in sync in terms of changes that are at least semi-permanent.Please read as much as you can about these topics, because every year something new is added.
So I am trying to inject some javascript into a website to scrape some information. However, if I could get a reference to the react component my life would be made a lot easier. I have looked at several questions on Stackoverflow but nothing useful turned up:
Reactjs - Get a component from anywhere in the app
React - get React component from a child DOM element?
I realize that react is basically just rendering the DOM by using its internal state and so reversing the DOM is not an option. Moreover, since the javascript on the website isn't mine I can't exactly have a global reference to the React component when its created. What I would really like is to have the '$r' that the react chrome devtools provides when you choose a DOM element but without having to rely on the chrome extension. I guess my question really boils down to how can I get the same representation that the chrome dev tools does so that I can reference a react component without actually creating a global variable. Also note I don't really care about efficiency or best practices I just want the reference to the component the same way that the devtools does it.
I'm trying to create subpanel in Account detail view where list of elements is fetched from external REST service.
I know how to define subpanel, but have no idea how to fill it with data from external network source. Was trying to use get_subpanel_data but there I can only change SQL.
Any ideas how can I do this?
When I've done this in the the past, at least with Sugar 6, I opted distinctly not to try to create a true subpanel. The data being loaded is coming from an outside source and is loaded dynamically with the page, so why present it as if it's static data coming from Sugar? Instead, I created a custom Smarty template to use as the footer on the detail page. For such an example, you can check how it works on the Calls Edit View. I think it's the footerTpl parameter in the detailviewdefs.php or editviewdefs.php. I loaded the smarty template by creating a custom detail view for my module, so custom/modules/MyModule/views/view.detail.php - extend the base Detail View class and override the display to feed Smarty new params, then your Smarty template only needs to iterate through and present the data that your view defined.
To be super-hip and abide by MVC, you could even put your custom code into your bean (if it's a custom module) or into a custom controller method, then reference that from the view.detail.php, and still feed it from there to the Smarty template.
Alternatively, you could just load JavaScript into the Smarty template and use the JavaScript to call the third-party service, parse and present it, etc.
I realize this question is a little bit old now however it comes up fairly often so why not provide an answer with a couple possible solutions. I won't get into code but more just into the design theory of how it can work. If someone needs more specific code help then that is another question.
A couple ideas...
As you mentioned you can define a custom Function which will load in Data to the SubPanel from your own SQL Query. That is one method that I just recently got to finally put to use after knowing about it for a good year and a half.
When you go this route, you are restrained to using the Columns in the SubPanel. I assume it is using the actual Metadata files to determine which Field Columns a SubPanel can use so you pretty much need your custom data in a Database table to have the same column names as the fields defined in the SubPanel Metadata.
Obviously this works great in the right situation, however not always and that leads us into the 2nd method I know of.
The other way is pretty much what #Mattew-Poer mentioned in his answer. It means abandoning the SubPanel altogether and instead generating your own HTML. This is by far my favorite and prefered way of doing it and I have been some really custom modules due to this being possible in a custom module! I will show an example below.
(Click HERE to View full size image)
In the screenshot, you can see in this example that I have something looking Similar to a SubPanel however it is not and is much for flexible and easy to customize.
Example, to the far left column in my fake subpanel is image checkboxes. When clicked on, an AJAX request is made to change the Task row Status.
After that, the checkbox image is updated to indicate the new Status state, the Modified DateTime is updated, the Status column has color background SPANS and is also updated with the correct text and background color when the left side checkbox is clicked.
Doing any of this with the standard SubPanels is a complete nightmare and would be difficult to do some of the stuff that you are open to do when you build your own version of a SubPanel.
With that said, I have built an identical clone of the above screenshot using SugarCRM default SubPanels! It was a nightmare. I could easily update the content and HTML in some of the columns. I even had the AJAX click checkbox image to update and do all the other updates I mentioned above. It wasn't too hard and worked fairly good but it had some issues.
When you do inline edit, inline create record, or subpanel paging to load different set of record. You would then lose all the custom HTML formatting that was applied. The reason is, in the SubPanel you are limited to using the After UI load logic hook. So since the "Page" is loaded already, when an AJAX request is made to add/edit the subpanel content or load a new set of items with the paging links. It only loads the SubPanel content on those events and the whole Page content does not reload. Because the logic hook only fires off 1 time after the page loads, this newly loaded subpanel data doe not receive any of your custom HTML formatting.
In my case, this means that nice looking colored background Status spans are lost, the image checkboxes are lost, and some other functionality is lost.
Now to get super technical, I could have gone another 3rd route and instead made new Custom Field Types for each SubPanel filed that I needed to apply custom HTML to. This process is super hard in my experience and in some cases it really isn't the BEST solution.
Because of the reason explained, this is why my new modules use the Custom HTML route to generate my own version of a custom subpanel or whatever Data is needed in my Module pages! So far it is working better than I imagined and has opened doors for me to build custom SugarCRM modules that I previously didn't even realize would be possible to build due to some of the issues I mentioned above. Now I bypass them altogether and open the door to do pretty much anything!
I've got some really cool stuff for SugarCRM in the works right now. If anyone has any questions feel free to ask in a new question or for me personally in a comment here.
I need to be able to access the code that Drupal uses to display the form for adding Content. Really just need to access 1 node's code. The problem is that a Node was added as content to be outputted within a view, however, the Node creation is Public, thus causing a form type of look and feel to it. However, the Content Node Creation Form is now being Spammed. I have implemented a Bot Blocking Script via HTML and CSS and JS that works wonderfully on previous sites (Non-Drupal related), but I don't know how I can implement the same code on Drupal.
I would need to access this Nodes HTML,CSS, and/or JS for the Form Creation in Drupal.
Any ideas where to start?
Or perhaps this would be inside the structure of the node? Can you add uneditable HTML Code inside of a content node by default? This is probably a dumb question tbh, but as some have said, the only dumb question is the one that's not asked.