Mam na przykład:
<pre>
sun<br/>
mercury <br/>
venus <br/>
earth <br/>
mars <br/>
jupiter <br/>
saturn <br/>
</pre>
i to:
<div style="font-family:monospace">
<div style="text-indent: 0">sun</div> <br/>
<div style="text-indent: 4ch">mercury</div> <br/>
<div style="text-indent: 4ch">venus</div> <br/>
<div style="text-indent: 8ch">earth</div> <br/>
<div style="text-indent: 8ch">mars</div> <br/>
<div style="text-indent: 12ch">jupiter</div> <br/>
<div style="text-indent: 4ch">saturn</div> <br/>
</div>
I chcę, aby drugi wyglądał dokładnie tak samo jak pierwszy.
Sądzę, że wyglądają identycznie, ale moim jedynym dowodem było użycie starej techniki „przełączania okien w przód i w tył naprawdę szybko”. (Astronomowie nazywają to „komparator blink” - https://en.wikipedia.org/wiki/Blink_comparator ). Upewniłem się, że okna były tego samego rozmiaru i w tej samej pozycji. Ale jeśli renderowany HTML nie mieści się na ekranie, może to być zbyt trudne.
Czy istnieje bardziej ostateczne narzędzie lub metoda wykonania tego porównania?
Patrzyłem na nie zarówno w Chrome 77.0.3865.120, jak i Firefox 69.0.3.
Wiem na przykład, że w przypadku testów kwasowych, które pierwotnie były częścią projektu Web Standards Project - https://www.acidtests.org/ - wzorcowe było renderowanie w pikselach.
(Dodatkowy kredyt: kod HTML drugiego fragmentu kodu jest prawdopodobnie odpowiedni dla moich potrzeb; jeśli zechcesz zasugerować ulepszenia, będą one mile widziane).
EDYCJA : Moje pytanie porównuje dwie małe próbki HTML, które można wyrenderować, aby zmieściły się w widocznej części przeglądarki. Ale ogólnie chciałbym znać odpowiedź na HTML, która może być dość długa.
Odpowiedzi:
Zrobiłem coś podobnego podczas tworzenia strony związanej z CSS . Musiałem porównać dane wyjściowe wygenerowane przez HTML / CSS z obrazem, który został wcześniej wygenerowany za pomocą HTML / CSS.
Użyłem dom-to-image , który konwertuje kod na obraz zakodowany w standardzie base64. Umieszczam ten obraz w obszarze roboczym, a następnie używam dopasowania pikseli, aby porównać oba obrazy.
Oto przykład ilustrujący:
Pokaż fragment kodu
W powyższym kodzie mamy 2 bloki HTML i 2 płótna, na których będziemy malować nasze bloki. Jak widać, JS jest dość prosty. Kod na końcu uruchamia dopasowanie pikseli i pokazuje, ile różnych pikseli mają oba płótna. Dodałem opóźnienie, aby upewnić się, że oba obrazy są załadowane (możesz zoptymalizować później w przypadku niektórych zdarzeń)
Możesz również rozważyć trzecie płótno, aby podkreślić różnicę między oboma obrazami i uzyskać różnicę wizualną:
Pokaż fragment kodu
Zmieńmy zawartość, aby zobaczyć różnicę:
Pokaż fragment kodu
Możesz przeczytać więcej o tym, jak działają dwie używane przeze mnie wtyczki i znaleźć bardziej interesujące opcje.
Naprawiam rozmiary do 300 x 300, aby ułatwić demonstrację we fragmencie, ale możesz rozważyć większą wysokość i szerokość.
Aktualizacja
Oto bardziej realistyczny przykład porównania dwóch układów, które dają ten sam wynik. Szerokość / wysokość płótna będzie dynamiczna i oparta na treści. Z różnicą pokażę tylko ostatnie płótno.
Pokaż fragment kodu
Użyjmy innego obrazu:
Pokaż fragment kodu
źródło
Oto pomysł, aby faktycznie dokonać pomiaru za pomocą DOM - właśnie zastąpiłem ten tekst divami, które mają klasę, o którą można zapytać. Następnie możesz wydrukować przesunięcie wszystkich węzłów.
Z tego, co mierzę, wcięcia znaków są w rzeczywistości takie same jak
.źródło
znaki są również częścią TextNodes. Jest to ważne, ponieważ oznacza, że twoje rozwiązanie nie może działać programowo.Wydrukuj ekrany dwóch stron i porównaj piksele.
Możesz użyć webdrivera, takiego jak selen, renderować dwa ekrany w pliku obrazu (png, jpg itp.) - selenium ma na to sposób - i napisać oprogramowanie do odczytu pikseli tych dwóch w celu porównania pod względem podobieństwa.
Webdriver to przeglądarka, którą możesz kontrolować za pomocą kodu. I możesz znaleźć oprogramowanie, które porównuje obrazy w Internecie.
Więcej informacji można znaleźć pod tym linkiem: https://selenium.dev/
źródło
Najpierw musimy przechwycić obrazy
Metoda przechwytywania 1
Użyj przycisku ekranu drukowania na klawiaturze (lub innym narzędziu zrzutów ekranu).
W przypadku stron, które są zbyt długie lub szerokie, aby zmieściły się na ekranie, wykonaj kilka zrzutów ekranu z każdej strony i złóż je razem w edytorze zdjęć. Możesz wykonać nakładające się zrzuty ekranu dużej strony, umieścić je na osobnych warstwach, a następnie użyć nakładających się fragmentów, aby ustawić elementy dokładnie przed scaleniem warstw w celu utworzenia kompozytu całej strony.
Metoda przechwytywania 2
Możesz użyć rozszerzenia przeglądarki, takiego jak FireShot, aby przechwycić całą stronę naraz.
Po drugie porównujemy obrazy
Metoda 1
Otwórz photoshop lub przejdź do photopea .
Wklej zrzut ekranu do warstwy.
Powtórz to dla drugiej strony, wklejając na inną warstwę.
Przełącz widoczność warstwy, a wszelkie zmiany będą oczywiste. Lub dostosuj krycie górnej warstwy (i / lub ustaw różne tryby mieszania), aby porównać.
Metoda 2
Użyj rozszerzenia przeglądarki, takiego jak pixel-perfect-2, które umożliwia nakładanie półprzezroczystych obrazów w przeglądarce. Jest to przydatne rozszerzenie do sprawdzania wyrównania i odstępów, ponieważ w przeglądarce można nakładać strony obrazem siatki.
Metoda 3
Użyj narzędzia do różnicowania obrazu. Szybkie wyszukiwanie w Google spowoduje pojawienie się zbyt wielu, aby wymienić tutaj. Istnieją wtyczki diff obrazu dla niektórych edytorów kodu, narzędzi wiersza poleceń, skryptów Python i usług online, takich jak diffchecker .
źródło
Możesz umieścić jeden nad drugim w tym samym dokumencie z pozycją: bezwzględny; I może powiększyć, aby przyjrzeć się bliżej.
źródło
<pre>
tagu w odniesieniu do<body>
marginesów nie mogłem ich wyrównać. Wygląda na to,#a, #b { ... }
że twoje style działają poprawnie.Nakładaj dwie strony jedna na drugą za pomocą elementów iframe. Powinno to pozwolić Ci zobaczyć różnice między dwiema stronami.
main.html:
doc1.html:
doc2.html
(Podejrzewam, że jest na to sposób za pomocą urywków stosu. Zapraszam do oświecenia mnie)
źródło
Jest tu kilka naprawdę skomplikowanych i sprytnych metod kodu, więc tutaj jest prosta,
Zrób zrzut ekranu, otwórz go w edytorze obrazów obsługującym przezroczystość, takim jak Photoshop,
Wklej go, a następnie pokaż ekran CSS i wklej go, aby ustawić drugi wklejony obraz na krycie 50% i sprawdź, czy się wyrównają.
źródło
Jak do tej pory widziałem, niewiele osób wspomina o rzeczywistych narzędziach testujących.
Istnieje wiele narzędzi dla twojej skrzynki użytkownika (często część większych frameworków):
Aby wymienić tylko kilka z tego listy. Może poszukaj siebie i wybierz ten, który pasuje do twojego środowiska.
Jeśli chcesz zbudować zrównoważoną automatyzację, nie polegaj na hackach. Może to być „tylko” kontrola jakości, ale może poważnie zaoszczędzić ** w przyszłych wydaniach.
źródło