Menguji frontend aplikasi web berbasis konten
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
Pengujian sangat penting untuk memastikan fungsi, kualitas, aksesibilitas,
keamanan, dan performa aplikasi web berbasis konten Anda. Pengujian memungkinkan Anda menilai pengalaman pengguna dan menentukan apakah pengembangan lebih lanjut diperlukan. Aplikasi web Anda harus memenuhi standar kualitas dan berperforma seperti yang diharapkan.
Hal ini memberikan panduan pengujian dasar bagi Anda sebagai pertimbangan untuk membuat aplikasi web
Anda mudah diakses dan mudah digunakan.
| Komponen |
| Kontras warna |
Memastikan rasio kontras dioptimalkan agar mudah dibaca. Pemeriksaan perlu dilakukan untuk berbagai jenis buta warna dan warna paksa kontras tinggi buatan pengguna.
|
| Tipografi |
Menentukan apakah aplikasi mengakomodasi berbagai perangkat dan setelan. Dengan menggunakan ukuran
font relatif dan penskalaan non-linear, tipografi masih dapat digunakan pada ukuran maksimum.
|
| Gambar |
Memastikan bahwa gambar berkualitas tinggi dan dapat dimuat dengan cepat. Anda harus memeriksa
penggantian yang benar tanpa jaringan dan aset yang dioptimalkan untuk resolusi lebih tinggi.
|
| Navigasi |
Memastikan bahwa navigasi jelas dan dapat digunakan oleh navigasi mouse, sentuhan, dan keyboard.
Memeriksa histori API memastikan navigasi kembali dan maju juga dipertahankan dengan benar.
|
| Telusuri |
Periksa latensi rendah dalam waktu respons terhadap kueri di kolom penelusuran dan parameter kueri URL.
|
| Formulir |
Pastikan semua formulir mudah digunakan untuk diisi dan dikirim. Jika mengganti pengiriman formulir default, peristiwa yang benar harus dipantau dan diperiksa untuk menemukan reset formulir yang tepat serta perlindungan terhadap input pengguna yang berbahaya.
|
| Pertunjukan |
Memastikan bahwa aplikasi efisien dan responsif, dengan waktu pemuatan yang cepat. Hal ini juga harus menjadi
bagian penting dari pengujian regresi.
|
Ada banyak alat yang dapat Anda
gunakan untuk memeriksa aksesibilitas web. Penting untuk menggunakan beberapa metode agar
mencakup berbagai komponen aksesibilitas. Pastikan untuk memeriksa label ARIA, a11y pada elemen DOM, navigasi keyboard, dan penggunaan pembaca layar.
Framework pengujian front end, seperti Jest,
Vitest,
Cypress,
Mocha, atau
Jasmine membantu Anda menulis pengujian
secara efisien serta mendukung pengembangan yang didorong perilaku dan berbasis pengujian. Dengan integrasi ke pipeline CI/CD, Anda juga dapat mengotomatiskan pengujian dan membantu mencegah bug regresi dalam commit.
Framework Runner, seperti Web Test Runner, Playwright, Web Driver, atau Test Runner di Node.js memungkinkan Anda menjalankan pengujian ini secara efisien dan mendukung pengujian di beberapa lingkungan dan platform. Ini bukanlah daftar lengkap dan bergantung pada framework yang Anda
gunakan, mungkin terdapat pengujian bawaan.
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2025-07-25 UTC.
[null,null,["Terakhir diperbarui pada 2025-07-25 UTC."],[[["\u003cp\u003eTesting is essential for ensuring the functionality, quality, accessibility, security, and performance of your web application, ultimately enhancing user experience.\u003c/p\u003e\n"],["\u003cp\u003eKey components of web application testing include color contrast, typography, images, navigation, search, forms, and performance.\u003c/p\u003e\n"],["\u003cp\u003eUtilize a variety of accessibility testing tools and methods to cover a comprehensive range of components like ARIA labels, keyboard navigation, and screen reader compatibility.\u003c/p\u003e\n"],["\u003cp\u003eLeverage front-end testing frameworks such as Jest, Vitest, Cypress, Mocha, or Jasmine to efficiently write and automate tests, supporting both behavior-driven and test-driven development.\u003c/p\u003e\n"],["\u003cp\u003eEmploy runner frameworks like Web Test Runner, Playwright, Web Driver, or Node.js's Test Runner for executing tests across multiple environments and platforms.\u003c/p\u003e\n"]]],["Testing should evaluate web application accessibility, functionality, and performance. Key actions include checking color contrast for readability, ensuring relative typography scaling, and verifying image quality and load times. Navigation should be usable via mouse, touch, and keyboard. Search response times should be fast, and forms must be user-friendly with appropriate event handling. Performance, including fast load times, is vital. Multiple tools and front-end frameworks (e.g., Jest, Cypress) can aid in this process, and automation via CI/CD pipelines is recommended.\n"],null,["# Testing a content-driven web app frontend\n\nTesting is crucial to ensuring the functionality, quality, accessibility,\nsecurity, and performance of your content driven web application. Testing lets\nyou assess the user experience and determine if further development is\nnecessary. Your web application should meet quality standards and perform as\nexpected.\n\nThis provides basic testing guidance for you to consider to make your web\napplication accessible and user-friendly.\n\n| Components ||\n|----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| Color contrast | Ensures that the contrast ratio is optimized for readability. Checks need to be done for various types of color blindness and user defined high contrast forced colors. |\n| Typography | Determines if the application accommodates different devices and settings. By using relative font size and non linear scaling the typography can still be usable on the max size. |\n| Images | Ensures that the images are high quality and can load quickly. It is important to check for correct fallbacks with no network and optimized assets for higher resolutions. |\n| Navigation | Ensures that the navigation is clear and usable by mouse, touch and keyboard navigation. Checking the history api ensures the back and forward navigation is also preserved correctly. |\n| Search | Check for low latency in response times to queries in the URL query parameters and search field. |\n| Form | Ensures that all forms are user-friendly to complete and submit. If overriding the default form submission the correct events need to be listened to and checked for proper form reset and protection against malicious user input. |\n| Performance | Ensures that the application is efficient and responsive, with fast load times. This should be an important part of regression testing too. |\n\nThere are [many tools](https://www.w3.org/WAI/ER/tools/) you can\nuse to check web accessibility. It is important to use multiple methods in order\nto cover the range of accessibility components. Be sure to check for ARIA\nlabels, a11y on DOM elements, keyboard navigation, and screen reader use.\n\nFront end testing frameworks, such as [Jest](https://jestjs.io/),\n[Vitest](https://vitest.dev/),\n[Cypress](https://www.cypress.io/),\n[Mocha](https://mochajs.org/) or\n[Jasmine](https://jasmine.github.io/) help you write tests\nefficiently and support behavior-driven and test-driven development. With\nintegrations into CI/CD pipelines you can also automate your tests and help\nprevent regression bugs in commits.\n\nRunner frameworks, such as [Web Test\nRunner](https://modern-web.dev/docs/test-runner/overview/),\n[Playwright](https://playwright.dev/), [Web\nDriver](https://webdriver.io/) or the [Test Runner in\nNode.js](https://nodejs.org/api/test.html) let you execute these\ntests efficiently and support testing across multiple environments and\nplatforms. This is not an exhaustive list and depending on the framework you are\nusing there could be testing built-in."]]
