When i have checked the cypress latest version of 12.5.1 it is suggested to use the playwright-webkit where the safari browser is using the webkit engine it seems. here I need to simulate real time safari browser execution. Is there any way to do this?
I have tried to execute the playwright-webkit but unluckily it is not even open the URL and webkit is not working properly and if we switch to chrome or another browser it is working fine. but my request is to execute in safari the most.
I am trying to debug client side javascript on Safari on Big Sur.
Seems Webstorm will only spawn Chrome for debug sessions.
The bug I have is only evident in Safari.
Any pointers?
there are some solutions on this question: Is there a vue-devtools extension for Safari?
Either build the Vue devtools or install an Electron app for those, didn't even knew those existed!
I'm looking at writing some E2E tests using Playwright. I can see that the library allows tests to be run against Chromium, Firefox and Webkit. My understanding is that Webkit is the underlying engine of Safari, and Chromium is the base of Chrome (and other browsers).
When it comes to testing against Webkit/Chromium, how close is it to testing against the user facing browsers which use the underlying engines? I'd imagine that there would be some quirks which the user can run in to whilst using Safari and it wouldn't be caught when running the tests on Webkit.
Thanks
Stock browsers like Google Chrome, Apple Safari embed rendering engines (Chromium, WebKit) and add stuff on top of them. In particular, they add proprietary media codecs, inject browser extensions, etc. They also add surrounding interfaces such as bookmarks sync. But they reuse the underlying web platform implementation.
Chromium
Chromium is the open source web platform implementation used by Google Chrome, Opera, Microsoft Edge and other browsers. It implements web specs, renders content, works with network, etc. Playwright uses a stock Chromium build that can be automated with the Playwright API for e2e testing.
For Google Chrome things are simple: Chromium is a safe target to test, modulo proprietary media codecs and DRM. You can point Playwright against stock Chrome Canary or Edge Canary to use proprietary media codecs.
WebKit
WebKit is the open source web platform implementation used by Apple Safari and Epiphany. As of June 2020, Playwright provides a WebKit build that can be automated with the Playwright API for e2e testing. Playwright WebKit works across all platforms (macOS, Linux, Windows), in both headless and headful modes.
When WebKit runs on macOS, it is a safe target to test Safari. WebKit on Linux and Windows differs from Apple Safari in the following ways: it uses a non-macOS network stack, uses non-Core Animation to composite scene and produce image raster. This means that screenshots on Linux and Windows will not perfectly match screenshots from macOS. In terms of the web platform, the same WebKit code will layout the page and run JavaScript—it will match how WebKit works in Safari.
To conclude, we consider the browsers provided by Playwright to be the best of what you can get for e2e testing. Running WebKit on a Linux CI would use a different compositing pipeline than macOS, but it can be used for e2e testing of web applications in WebKit-powered browsers.
I've found there are some differences between webkit and Safari depending on which version of the two you're testing against.
I was testing Safari 16.0, and for my purposes Playwright 1v17 seemed to match very well. Upgrading to Safari 16.2 didn't seem to affect that.
But upgrading Playwright to 1v28 though seemed to change the behaviour around getting selection bounding boxes. It's seems more correct, but it's no longer consistent with Safari 16.2.
I'm assuming that WebKit is a bit ahead of Safari, and at some point Safari will catch up, and we'll see they are behaving the same again, but so far that's not happened. (Or maybe it has already, I'm a couple of versions behind at this point).
My solution has been to use both the latest version of Playwright for testing Chromium and Firefox, but use the older version for testing Safari. I am also testing webkit from Playwright 1v28 for interest right now, but I expect Safari will start showing that behaviour at some point.
(NB: Getting the bounding boxes of selections gets different results from each browser, so it's not too surprising that it's changing in WebKit right now. The change seems to be closer to Chrome's behaviour but still not the same).
In case it helps anyone, in my package.json devDependencies I have
"playwright1v17": "npm:playwright#~1.17.2",
"playwright1v28": "npm:playwright#~1.28.1",
and then in the test script I do
import { chromium, webkit, firefox } from 'playwright1v28';
import { webkit as safari16v1 } from 'playwright1v17';
That lets me test both versions of webkit and compare, as well as Chromium and Firefox.
I built the chromium for android following these instructions https://code.google.com/p/chromium/wiki/AndroidBuildInstructions .
I got the content shell only not the full browser.
Then, I built the Firefox for Android. I successfully got the Full web browser. But the performance of the chrome content shell was much much better than that of Firefox Android build. Now, I want to try building the Firefox Android using chromium rendering Engine, Blink replacing the Gecko rendering Engine. How much is the difficulty level and how can I start.
Thanks,
Chromium uses Blink (earlier Webkit) as its rendering, and V8 for Javascript interpretation along with various 3rd party dependencies. Even though Content shell is a small browser (sans complex UI of Chromium) it is functional and a wrapper over Blink. Having said that fitting Blink with Firefox (instead of Gecko) will be a new project by itself, probably you can try building Webview, so that you can build a simple browser itself in android. http://developer.android.com/reference/android/webkit/WebView.html
Chromium - Open Source project
Chrome- Google's proprietary software + Chromium
In Android only Google Chrome can be installed as APK, wherease Chromium can be built as content shell or used through WebView
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zMDKC2x9o5w
Also, is there a way to test those webapp in a webkit based browser such as chrome (with phonegap plug-in maybe) on a PC first before compiling it to test on a device or emulator?
The key reason is that trouble shooting mal-formed html, javascript code is very difficult on a device or emulator. You can not view the js console to see all error. The Weinre is great, but it can not spits out the error browser complains when initially loading the page.
It will be great if we can validate the html, js, css app first before diving deeper into testing on Android device. i.e. a way to weed out some simple problems before getting into more complicated deeper problems.
Any experience/suggestions/ideas/pointers are greatly appreciated.
Paul> Seems promising. Will try and report back. It seems knowledgeable in phoneGap mob dev. What are the key steps would you go through to dev a phoneGap mob web-app?
Ripple is a Chrome plug-in that includes a PhoneGap mode.
For JavaScript static validation, the PhoneGap Android Eclipse AppLaud plug-in includes a JSLint mode.
I would recommend you use Safari. In your Safari (on Mac) go to Settings (on PC) goto preferences -> Advanced -> check on "Show Develop in Menu bar".
Now you'll find in the Menu "Develop" "User Agent". There you can change the UserAgent identification, that will be send to the server. You can then change it to iPhone.
This way you can at least test it for iOS.
Hope that helps somewhat.