Preserve browser Autofill for Bag, Flow, and WidgetList Parts, Lombiq UI Testing Toolbox - This week in Orchard (06/10/2021)
Preserve browser Autofill for Bag, Flow, and WidgetList Parts, remove unnecessary role attributes, Lombiq UI Testing Toolbox demo, and many more coming this week! Do you want to know more? Then don't forget to check out our current post!
Orchard Core updates
Preserve browser Autofill for Bag, Flow, and WidgetList Parts
Currently, while editing a Flow/Bag/WidgetList Part, the HTML input IDs are based on the related embedded item IDs that always have different values. So we lose the browser autofill based on these HTML input IDs when editing another parent.
So, here the idea is to generate IDs that are still unique while editing in the context of a given parent item, but that is the same while editing another parent content item of the same type. This is by generating IDs using a prefix composed of the part name of a given unique/named part, a delimiter, then a number equals the number of the current item. For the WidgetList Part, we also use the related zone name in the prefix.
If you set up a site using the Agency recipe, you can check out the content of the Agency Landing Page content item, that has Bag Parts attached with prefilled data.
Remove unnecessary role attributes
Some HTML5 elements have implied WAI-ARIA roles so setting the implied roles on them explicitly is invalid HTML. Check out this link for more information: https://html-validate.org/rules/no-redundant-role.html. In the following screen, you can see some removals of the role attribute.
Demos
Lombiq UI Testing Toolbox
The Lombiq UI Testing Toolbox is a web UI testing toolbox mostly for Orchard Core applications. Everything you need to do UI testing with Selenium for an Orchard app is here.
UI Testing here is an automation that clicks through the web application in a browser. One of the most popular frameworks for that is Selenium, which does exactly that. You get an API to instruct a browser, and every major browser is supported. This UI Testing Toolbox providing a lot of features on top of Selenium for Orchard Core. Basically allowing you to UI test an Orchard Core application in a safe and parallelized way providing a lot of helpers, a lot of higher-level APIs allowing you to test your application with SQLite, with SQL Server with local media storage, or with Azure Blob Storage. And you can have a test e-mail sending with a local SMTP server too. Everything just works. Check out the highlights of the Readme.md file of this repository to see all of the features!
How it works is also demonstrated in an example project which is part of our Open-Source Orchard Core Extensions full Orchard Core solution. Just clone that repository and find the solution folder called test in it. There is a Lombiq.Tests.UI.Samples project that contains several sample UI tests where you can see how to test your application. Let's check out the LoginShouldWork test in the BasicTests.cs file!
As you can see, here we say that first, let's navigate to the /Login relative URL. Then find the UserName and Password form fields by their IDs and fill their content with the default username and password. After the test will find the submit button of the form and click on it. And if the retrieved user name of the currently authenticated user is the default user name, our test will pass!
If you check the BrowserConfiguration file, you can see it can be used to provide some useful configuration values that can be used by the browser. For example, the value of the Headless property indicating whether the test will use the given browser in headless mode, provided that there's support for it. If you set it to false and run a given UI test by using the Test Explorer of Visual Studio, for example, you will see that the test will open up a browser where you can see the given test running.
And we are just stretching the surface of the several features that you can have using the Lombiq UI Toolbox module! Don't forget to check out this recording on YouTube to see what else the toolbox can provide!
News from the community
Orchard Core Facebook Page
Did you know that Orchard Core has its own Facebook Page? By following the Facebook Page, you can meet with new posts when a new Orchard Podcast or Orchard Demo has been uploaded to YouTube or when there is a new This week in Orchard post or any other important news or happenings around Orchard Core. The posts created on this page will also be shared in the Orchard Core User Group. Don't forget to follow the Orchard Core Page and join the Orchard Core User Group to be notified about the latest news around Orchard Core!
New Lombiq team member: Viktória Magyar
Viktória Magyar, our newest team member arrived! She is a developer but not Orchard Core this time, rather of our business! You can check out her full bio here!
Orchard Dojo Newsletter
Lombiq's Orchard Dojo Newsletter has 227 subscribers! We have started this newsletter to inform the community around Orchard with the latest news about the platform. By subscribing to this newsletter, you will get an e-mail whenever a new post is published to Orchard Dojo, including This week in Orchard of course.
Do you know of other Orchard enthusiasts who you think would like to read our weekly articles? Tell them to subscribe here!